/* collabatwork.ch – style.css Diese Datei enthält absichtlich WENIG. Fast alle Stile stehen inline im Markup, damit die Seiten ohne eine zweite Netzanfrage dargestellt werden. Hierher kommt nur, was inline nicht möglich ist: 1. Grundlagen (Zurücksetzen, Schrift, Farben des Dokuments) 2. Zustände beim Überfahren mit der Maus 3. das mobile Menü 4. Umbrüche für schmale Geräte 5. die Rechtsseiten (Impressum, Datenschutz, AGB) Farben, die überall vorkommen: #FAF7F2 Sand, Hintergrund #1A1917 Text und dunkle Flächen #3D3B36 Fliesstext #5C5A54 leiser Fliesstext #8E8B84 Nebenangaben #E2DDD4 Haarlinien #C4653A Signalfarbe der Marke #A34E29 dieselbe, dunkler für Text #F2E9DF Beige, Abschnitt «Über mich» Es wird keine Schrift nachgeladen. Die Seite nutzt die Systemschrift des Geräts – San Francisco, Segoe UI oder Roboto. Das ist eine bewusste Entscheidung: keine Verbindung zu Google, sofortige Darstellung, und der Datenschutztext kommt ohne Abschnitt zu externen Schriften aus. Umbruchpunkte: 860px (Menü) und 700px (Spalten werden zu Zeilen). */ /* --- 1. Grundlagen ----------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: #FAF7F2; color: #1A1917; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: #1A1917; } a:hover { color: #C4653A; } img { display: block; max-width: 100%; } ::selection { background: #F1D9CC; } input:focus, select:focus, textarea:focus { outline: 2px solid #C4653A; outline-offset: -2px; } [hidden] { display: none !important; } /* --- 2. Mobiles Menü --------------------------------------------------- Unter 860px verschwindet die Navigation und der Menüknopf erscheint. Der Sprachknopf bleibt daneben sichtbar (siehe unten, .cw-lang-mob) – er gehört bewusst NICHT ins Menü, weil ein Sprachwechsel auffindbar sein muss. */ .cw-mob { display: none; } .cw-mob.open { display: flex; } @media (max-width: 860px) { .cw-nav { display: none !important; } .cw-burger { display: flex !important; } } /* --- 3. Zustände beim Überfahren --------------------------------------- Die Auswahl über [style*="…"] sieht ungewöhnlich aus, hat aber einen Grund: die Elemente tragen ihre Stile inline und haben keine Klassen. Wird ein inline-Stil im Markup geändert, muss die entsprechende Regel hier mitgeändert werden – sonst greift der Hover-Zustand nicht mehr. */ header .cw-nav a:hover { color: #1A1917; } a[style*="background:#C4653A"]:hover { background: #1A1917 !important; } a[style*="border:1px solid #D8D2C7"]:hover { border-color: #1A1917 !important; } a[style*="border-right:1px solid #E2DDD4"]:hover, a[style*="padding:20px 0 20px"]:hover { background: #fff; } button[type=submit]:hover { background: #C4653A !important; } .cw-burger:hover { border-color: #1A1917; } /* --- Entwurfsband -------------------------------------------------------- Wird derzeit nicht verwendet (die Seite ist live). Die Regeln bleiben stehen, falls die Seite für einen Umbau nochmals als Entwurf gekennzeichnet werden soll: dazu
Entwurf…
als erstes Element im jeder Seite einsetzen. */ .draft { background: #1A1917; color: #B8B4AC; padding: 9px 24px; display: flex; gap: 12px; align-items: baseline; justify-content: center; flex-wrap: wrap; font-size: 13px; line-height: 1.5; } .draft b { color: #C4653A; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; } /* --- 5. Rechtsseiten ----------------------------------------------------- Impressum, Datenschutz, AGB und deren englische Fassungen. Diese Seiten nutzen als einzige echte CSS-Klassen statt inline-Stilen, weil sie viel Fliesstext mit immer gleicher Auszeichnung enthalten. */ .legal { max-width: 760px; margin: 0 auto; padding: clamp(52px,9vw,80px) clamp(20px,5vw,28px) clamp(66px,11vw,100px); } .legal h1 { font-size: clamp(2rem,5vw,3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin: 26px 0 34px; } .legal h2 { font-size: 1.02rem; font-weight: 600; margin-bottom: 10px; } .legal section { margin-bottom: 30px; font-size: 1.02rem; line-height: 1.68; color: #3D3B36; } .legal p { margin: 0 0 14px; } .legal .end { font-size: .9rem; color: #6E6A63; border-top: 1px solid #E2DDD4; padding-top: 20px; } .legal .back { font-size: .95rem; font-weight: 500; } /* --- 4. Schmale Geräte --------------------------------------------------- Umbruch: senkrechte Trennlinien werden zu waagrechten, Einzüge fallen weg */ @media (max-width: 700px) { a[style*="border-right:1px solid #E2DDD4"], div[style*="border-right:1px solid #E2DDD4"] { border-right: none !important; border-bottom: 1px solid #E2DDD4 !important; } a[style*="padding:20px 0 20px"], div[style*="padding:28px 0 30px"] { padding-left: 0 !important; } a[style*="padding:20px clamp(16px,2vw,28px)"], div[style*="padding:28px clamp(20px,3vw,34px)"] { padding-left: 0 !important; padding-right: 0 !important; } } /* Sprachknopf nur auf schmalen Geräten, neben dem Menüsymbol */ .cw-lang-mob { display: none; } @media (max-width: 860px) { .cw-lang-mob { display: inline-flex !important; } } /* --- 6. Aufzählungen in den Angeboten ----------------------------------- Die Listen tragen inline die Eigenschaft --dot:1 als Markierung. Sie bekommen dadurch einen kleinen Punkt in der Signalfarbe vor jeder Zeile, damit sie sich auf schmalen Geräten vom Fliesstext darüber abheben. Bewusst kein