/* ============================================================================ PORTFOLIO v2 - nur das Aussehen DIESER Seite. kunde.css liefert Aufbau, Masse und Verhalten. Diese Datei setzt den Entwurf um: fast schwarzer Grund, ein einziges Gelbgruen als Zierfarbe, schwere Versalien, und jeder Abschnitt in einem eigenen dünn umrandeten Kasten. Der Entwurf liegt unter docs/active/SEOOptimierung/Website analyse und SEO Strategie/ Die Farbwerte hier sind aus dem Blatt ausgelesen, nicht geschaetzt. ========================================================================= */ /* DIE FARBEN DES WABENNETZES. Sie stehen HIER an der Wurzel und nicht an .waben selbst. Der Grund ist die Rangfolge: loader.js schreibt die Werte aus dem Adminpanel als Inline-Stil an genau diese Wurzel, und ein Inline-Stil schlaegt jedes Stylesheet. Stuenden die Vorgaben dagegen an .waben, wuerde eine Angabe am Element die geerbte von der Wurzel verdecken - und der Regler im Panel waere wirkungslos. Genau das war er im ersten Anlauf. WARUM NICHT var(--accent): die Zierfarbe der Seite ist ein Gelbgruen mit 201 Rot zu 242 Gruen. Als Flaeche und als Schrift ist das ein klares Gruen; als duenne Linie vor Schwarz bleibt davon zu wenig uebrig, um es zu erkennen - dunkel wirkt sie braun, hell oliv. Beides gemessen. --waben-farbe die ruhigen Waben am Rand der Spur --waben-farbe2 die hellen unter dem Zeiger und auf dem Wellenkamm --waben-leuchten wie kraeftig das Ganze leuchtet, 1 ist die Vorgabe Stehen beide Toene auf demselben Wert, wird das Netz unter der Maus nur heller und nicht anders. Das ist die Vorgabe. */ :root{ --waben-farbe:#7CF08A; --waben-farbe2:#7CF08A; --waben-leuchten:1; } :root[data-helligkeit="dunkel"]{ --bg:#05080C; /* Der Kasten ist nur eine Spur heller als der Grund. Auf dem Blatt trennt ihn die Linie, nicht die Flaeche. */ --surface:#080A0E; --ink:#ECEAE9; --sub:#9096A0; --line:rgba(255,255,255,0.085); /* Die Linie zwischen zwei Spalten IN einem Kasten ist noch feiner als der Rahmen. Sie soll gliedern, nicht kaesteln. */ --linie-innen:rgba(255,255,255,0.07); } body{-webkit-font-smoothing:antialiased;} /* Kein Wechsel heller und dunkler Baender: die Seite ist durchgehend schwarz, gegliedert wird durch die Kaesten. */ .band{padding:14px 0; border-bottom:0; background:transparent;} .band:nth-of-type(even){background:transparent;} .band:first-of-type{padding-top:26px;} #faq{padding-bottom:34px;} .wrap{max-width:1240px;} /* ============================================================================ Ueberschriften Der Entwurf ist durchgehend in schweren Versalien gesetzt. Montserrat 800 kommt der gezeichneten Vorlage am naechsten; eine schmale Grotesk liefert der Baukasten nicht mit. ========================================================================= */ h1, h2, h3{font-weight:800; letter-spacing:-0.005em;} .kasten > h2{ font-size:clamp(1.25rem, 2.1vw, 1.72rem); text-transform:uppercase; letter-spacing:0.005em; margin:0 0 10px; } .kasten > .lede{ color:var(--sub); font-size:.94rem; max-width:60ch; margin:0 0 30px; } .kasten > .lede:empty{display:none; margin:0;} /* ============================================================================ Kopfzeile ========================================================================= */ /* DECKENDER GRUND, KEIN DURCHSCHEINEN. Vorher stand hier "transparent": die Kopfzeile lag ueber dem Startbild und sah dort gut aus, aber sie laeuft mit. Sobald man scrollte, wanderten Ueberschriften und Bilder der Abschnitte hinter der Schrift durch, und die Zeile war nicht mehr zu lesen. kunde.css loest das mit einer Weichzeichnung dahinter; hier ist der Grund ohnehin fast schwarz, also tut es die volle Deckung, und die kostet nichts an Rechenzeit. */ header{border-bottom:1px solid var(--line); background:var(--bg); backdrop-filter:none;} header .wrap.nav{padding-top:16px; padding-bottom:16px;} /* Der Schriftzug: "GRAF" schwer, "SYSTEMS" leicht und gesperrt daneben. Auf dem Blatt sind beide weiss - die Zierfarbe traegt hier nichts, sie gehoert dem Kicker und den Knoepfen. */ header .marke{ font-family:var(--schrift-ueberschrift); font-weight:800; font-size:1.32rem; letter-spacing:-0.02em; text-transform:uppercase; color:var(--ink); } header .marke em{ font-style:normal; font-weight:500; font-size:.72em; letter-spacing:0.14em; color:var(--ink); margin-left:.12em; } .nav-links{gap:30px;} .nav-links a{ font-family:var(--schrift-mono); font-size:.72rem; font-weight:500; letter-spacing:0.13em; text-transform:uppercase; opacity:.82; } .nav-links a::after{background:var(--accent);} /* Der Knopf rechts: nur Rahmen, in der Zierfarbe. */ .nav-cta{ font-family:var(--schrift-mono); font-size:.7rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase; padding:12px 22px; border:1px solid var(--accent); border-radius:0; background:transparent; color:var(--accent); transition:background-color .2s ease, color .2s ease; } .nav-cta:hover{background:var(--accent); color:#05080C;} /* Das Markenzeichen ist eine schwarze Zeichnung auf durchsichtigem Grund. Auf dieser Seite waere es unsichtbar, deshalb wird es umgekehrt. Ueber einen Filter und nicht ueber eine zweite Bilddatei: so bleibt EIN Logo im Ordner, und wer es austauscht, muss nicht an zwei Stellen denken. Die Helligkeitsangabe muss mit in dieselbe Regel: kunde.css daempft auf dunklen Seiten jedes Bild (filter:brightness(.94)), und zwei Filter-Eigenschaften ersetzen einander, statt sich zu ergaenzen. */ /* Die Auswahl muss die von kunde.css uebertreffen: dort steht ":root[data-helligkeit=dunkel] img", und das wiegt schwerer als eine Klasse allein. Eine Klasse mehr reicht nicht, der Wurzelteil muss mit. */ :root[data-helligkeit="dunkel"] .marke-logo, :root[data-helligkeit="dunkel"] .menue-logo, :root[data-helligkeit="dunkel"] .fuss-logo{ filter:invert(1) brightness(1.04); } .marke-block{gap:12px;} /* Burger und Klappfeld. kunde.css blendet das Menue unter 820px einfach aus - diese Seite hat neun Abschnitte und braucht dort eines. */ .nav-burger{position:relative; display:flex; align-items:center; flex-shrink:0;} .nav-toggle{ display:none; width:40px; height:40px; position:relative; background:none; border:1px solid var(--line); cursor:pointer; } .nav-toggle span{ position:absolute; left:10px; right:10px; height:1.5px; background:var(--ink); transition:transform .25s ease, opacity .2s ease; } .nav-toggle span:nth-child(1){top:13px;} .nav-toggle span:nth-child(2){top:19px;} .nav-toggle span:nth-child(3){top:25px;} .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);} .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;} .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);} .mobile-menu{ display:none; position:absolute; top:calc(100% + 10px); right:0; min-width:220px; background:var(--surface); border:1px solid var(--line); z-index:60; } .mobile-menu.open{display:block;} .mobile-menu a{ display:block; padding:13px 18px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line); font-family:var(--schrift-mono); font-size:.76rem; letter-spacing:0.1em; text-transform:uppercase; } .mobile-menu a:last-child{border-bottom:0;} .mobile-menu a:hover{color:var(--accent);} @media(max-width:960px){ .nav-toggle{display:block;} } /* ============================================================================ Startbereich Das Foto sitzt rechts und laeuft nach links in Schwarz aus. Es ist KEIN flaechig abgedunkeltes Bild wie auf der alten Seite, sondern ein Verlauf, der die linke Haelfte ganz freiraeumt - dort steht die Schlagzeile, und sie soll auf Schwarz stehen, nicht auf einem grauen Schleier. ========================================================================= */ .hero{ position:relative; isolation:isolate; overflow:hidden; padding:clamp(46px, 5.4vw, 72px) 0 clamp(38px, 4.6vw, 58px); border-bottom:0; background:transparent; } .hero .wrap{position:relative; z-index:2;} .hero-grund{position:absolute; inset:0; z-index:-1; overflow:hidden;} .hero-foto{ width:62%; height:100%; object-fit:cover; object-position:center; display:block; margin-left:auto; } .hero-schleier{ position:absolute; inset:0; background: linear-gradient(90deg, #05080C 0%, #05080C 34%, rgba(5,8,12,0.86) 45%, rgba(5,8,12,0.42) 58%, rgba(5,8,12,0.10) 76%, rgba(5,8,12,0.35) 100%), linear-gradient(0deg, #05080C 0%, rgba(5,8,12,0.12) 26%, rgba(5,8,12,0.12) 74%, #05080C 100%); } .hero-text{max-width:860px;} /* Der Kicker: gesperrte Versalien in der Zierfarbe. */ .hero .mono{ display:block; font-family:var(--schrift-mono); font-weight:600; font-size:.74rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; } .hero h1{ font-size:clamp(2.1rem, 5vw, 3.55rem); line-height:1.02; text-transform:uppercase; letter-spacing:-0.018em; /* KEINE Breitengrenze: der Umbruch steht in hero-headline.txt und wird als
uebernommen. Eine zweite Grenze funkte ihm dazwischen und machte aus zwei Zeilen vier. */ margin:0 0 20px; max-width:none; } /* Auf dem Blatt ist die ganze Schlagzeile weiss. Die Sternchen in der Textdatei setzen trotzdem ein - das bleibt fuer den Fall, dass die Hervorhebung spaeter doch gewuenscht ist, faerbt hier aber nichts. */ .hero h1 em{font-style:normal; color:inherit;} .hero .hero-sub{ color:#A9AEB6; font-size:1rem; line-height:1.62; max-width:52ch; margin:0 0 30px; white-space:pre-line; } .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px;} /* ============================================================================ Knoepfe Zwei Formen, mehr nicht: gefuellt in der Zierfarbe mit schwarzer Schrift, oder nur ein grauer Rahmen. Beide rechteckig - auf dem Blatt hat nichts runde Ecken. ========================================================================= */ .btn{ display:inline-flex; align-items:center; gap:.7em; font-family:var(--schrift-mono); font-size:.72rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; padding:15px 26px; border-radius:0; text-decoration:none; transition:background-color .2s ease, color .2s ease, border-color .2s ease; } .btn-solid{ background:var(--accent); border:1px solid var(--accent); color:#05080C; } .btn-solid::after{content:'\2192'; font-weight:400; font-size:1.1em;} .btn-solid:hover{background:#DDF56A; border-color:#DDF56A; color:#05080C;} .btn-line{ background:transparent; border:1px solid rgba(255,255,255,0.26); color:var(--ink); } .btn-line:hover{border-color:var(--accent); color:var(--accent); background:transparent;} /* Die vier Zusagen unter den Knoepfen. */ .hero-chips{display:flex; flex-wrap:wrap; gap:14px 26px;} .hero-chip{ display:inline-flex; align-items:center; gap:9px; font-size:.84rem; color:#B4B9C1; background:none; border:0; padding:0; border-radius:0; } .hero-chip svg{ width:15px; height:15px; flex:none; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } /* ============================================================================ Der Kasten Das tragende Bauteil des Entwurfs: ein duenner Rahmen um den ganzen Abschnitt, oben links eine kleine gesperrte Marke, darin der Inhalt. ========================================================================= */ .kasten{ border:1px solid var(--line); /* Eine Spur durchscheinend, nicht mehr. Dahinter liegt das Wabenmuster, das dem Zeiger folgt; bei voller Deckung waere es nur in den Fugen zwischen den Kaesten zu sehen, und der Bildschirm besteht zu vier Fuenfteln aus Kasten. 0.93 reicht: der Text bleibt ruhig, und wo der Zeiger steht, ahnt man die Struktur. */ background:color-mix(in srgb, var(--surface) 93%, transparent); padding:clamp(24px, 3vw, 38px); position:relative; } .kasten-flach{padding:clamp(20px, 2.4vw, 30px) clamp(24px, 3vw, 38px);} .kasten-label{ display:block; font-family:var(--schrift-mono); font-weight:600; font-size:.68rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } /* Nicht jede Marke ist gelb: ueber den Bauteilen ohne eigene Ueberschrift (Technologie-Stack, Warum Kunden mit mir arbeiten, Kontakt) steht sie auf dem Blatt in Weiss. Gelb ist sie dort, wo darunter eine Ueberschrift folgt. */ .kasten-flach > .kasten-label, .ab-kontakt > .kasten-label{color:var(--ink); letter-spacing:0.16em;} .kasten-fuss{display:flex; justify-content:center; margin-top:26px;} /* ============================================================================ Expertise (angebote, Darstellung "ikonen") Vier Spalten, getrennt durch feine senkrechte Linien. Keine Karten: auf dem Blatt steht der Text frei im grossen Kasten. ========================================================================= */ /* ALLE VIER KARTEN AUF EINER LINIE. Die Karten sind verschieden lang: eine Ueberschrift bricht auf zwei Zeilen, die naechste auf drei, und schon standen die gruene Zeile und der Verweis unten treppenfoermig versetzt. Vier Kaesten nebeneinander sehen dann nach Zufall aus statt nach Raster. Geloest mit subgrid: das Raster gibt SECHS Zeilen vor (Zeichen, Name, Satz, gruene Zeile, Liste, Verweis), und jede Karte reicht ihre eigenen Zeilen an dieses Raster durch. Die Liste bekommt 1fr und dehnt sich, der Verweis sitzt dadurch bei allen auf derselben Hoehe. Fuer Browser ohne subgrid steht weiter unten ein Rueckfall. */ #angebote .offer-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; grid-template-rows:auto auto auto auto 1fr auto; } #angebote .offer{grid-row:span 6;} #angebote .obody{grid-row:span 5;} @supports (grid-template-rows: subgrid){ #angebote .offer{display:grid; grid-template-rows:subgrid;} #angebote .obody{display:grid; grid-template-rows:subgrid;} } @supports not (grid-template-rows: subgrid){ #angebote .offer h3{min-height:3.9em;} #angebote .offer .oclaim{min-height:2.8em;} } #angebote .offer{ background:transparent; border:0; border-left:1px solid var(--linie-innen); padding:4px 26px 0; box-shadow:none; } #angebote .offer:first-child{border-left:0; padding-left:0;} #angebote .offer:hover{background:transparent; border-color:var(--linie-innen); box-shadow:none;} #angebote .offer:first-child:hover{border-left:0;} #angebote .obody{padding:0;} /* Das Zeichen im abgerundeten Kasten. Der einzige Rundungsradius auf der ganzen Seite, und er steht so auf dem Blatt. */ .oikon{ width:46px; height:46px; border-radius:12px; margin-bottom:22px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.10); background:radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 70%), rgba(255,255,255,0.02); } .oikon svg{ width:22px; height:22px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } #angebote .offer .oid{ font-family:var(--schrift-ueberschrift); font-weight:800; font-size:.95rem; letter-spacing:0.01em; text-transform:uppercase; color:var(--ink); margin-bottom:12px; } /* Die Zeile, die auf der alten Seite die Ueberschrift war, ist hier der Vorspann: auf dem Blatt steht unter dem Namen ein Absatz, keine zweite fette Zeile. Sie bleibt trotzdem stehen - sie benennt das Problem, und genau das fehlt dem Blatt. */ #angebote .offer h3{ font-size:.88rem; font-weight:600; line-height:1.45; color:#C8CDD4; margin-bottom:10px; } #angebote .offer .oclaim{ font-family:var(--schrift-mono); font-size:.7rem; letter-spacing:0.04em; color:var(--accent); opacity:.75; border-bottom:0; margin-bottom:12px; padding-bottom:0; } #angebote .offer ul{margin-bottom:14px;} #angebote .offer li{ font-size:.82rem; line-height:1.55; color:var(--sub); margin-bottom:7px; } /* Stichpunkte MIT Zeichen. kunde.css setzt vor jeden Stichpunkt einen Geviertstrich - die Kundenvorlagen tragen dort keine Zeichen, und ein Aufzaehlungsstrich muss sein. Hier steht ein Zeichen davor, und beides nebeneinander ist doppelte Auszeichnung fuer dieselbe Sache. (Der Strich verstiess ausserdem gegen die Schreibregel des Projekts.) */ #angebote .offer li.mit-icon{ padding-left:0; display:flex; align-items:flex-start; gap:10px; } #angebote .offer li.mit-icon::before{content:none;} #angebote .offer li.mit-icon .icon{ width:15px; height:15px; flex:none; margin-top:2px; stroke:var(--accent); opacity:.75; } #angebote .offer .ofoot a{ font-size:.7rem; letter-spacing:0.1em; text-transform:uppercase; border-bottom-color:rgba(255,255,255,0.18); color:var(--sub); } #angebote .offer .ofoot a:hover{color:var(--accent); border-bottom-color:var(--accent);} /* ============================================================================ Technologie-Stack Auf dem Blatt stehen dort die Wortmarken der Hersteller. Hier stehen die NAMEN: fremde Logos auf der eigenen Seite sind eine Rechtefrage, die man sich sparen kann, und ein Name wird ausserdem gelesen - von Suchmaschinen wie von Vorlesegeraeten. ========================================================================= */ /* Acht gleich breite Spalten statt einer umbrechenden Reihe. Vorher rutschten Git und Netlify in eine zweite Zeile und standen dort verloren. */ #partner .partner-grid{ display:grid; grid-template-columns:repeat(7, 1fr); align-items:center; justify-items:center; gap:20px; margin-top:16px; } /* Zeichen UND Name nebeneinander. Die Zeichen sind die offiziellen Wortlosen der Hersteller - ohne den Namen daneben erkennt sie nur, wer sie ohnehin kennt. */ #partner .partner-logo{ flex:none; min-width:0; display:flex; align-items:center; gap:10px; } #partner .partner-logo img ~ .partner-name{display:inline;} #partner .partner{ background:transparent; border:0; padding:0; box-shadow:none; /* kunde.css gibt der ERSTEN Partnerkarte zwei Spalten - dort ist sie die Hauptpartnerschaft und darf breiter stehen. Hier sind alle acht gleich viel wert, und ohne diese Zeile rutschten die letzten beiden in eine zweite Reihe. */ grid-column:auto; } #partner .partner-logo{margin:0;} #partner .partner-name{ font-family:var(--schrift-ueberschrift); font-weight:700; font-size:.86rem; letter-spacing:0.01em; color:#C6CAD1; white-space:nowrap; text-align:left; line-height:1.1; transition:color .2s ease; } #partner .partner:hover .partner-name{color:var(--ink);} /* Die Wortmarken sind aus dem Entwurf freigestellt: weisse Zeichnung auf durchsichtigem Grund. Deshalb hier keine Farbe, nur Hoehe und Deckkraft. */ #partner .partner-logo img{ height:19px; width:19px; flex:none; object-fit:contain; display:block; opacity:.72; filter:none; transition:opacity .2s ease; } #partner .partner:hover .partner-logo img{opacity:1;} #partner .partner-text{display:none;} /* ============================================================================ Arbeitsweise Fuenf Schritte in einer Kette: Nummer, Zeichen im Kreis, ein Pfeil zum naechsten. Die Kette liegt auf einer Zeile, die Texte darunter. ========================================================================= */ .schritte{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, 1fr); } .schritt{padding:0 22px; border-left:1px solid var(--linie-innen);} .schritt:first-child{border-left:0; padding-left:0;} .schritt-kopf{ display:flex; align-items:center; gap:14px; margin-bottom:20px; position:relative; } .schritt-nr{ font-family:var(--schrift-mono); font-weight:700; font-size:.76rem; letter-spacing:0.08em; color:var(--accent); padding-bottom:5px; border-bottom:1.5px solid var(--accent); } .schritt-icon{ width:42px; height:42px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.12); background:radial-gradient(100% 100% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 72%); } .schritt-icon svg{ width:20px; height:20px; fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; } /* Der Pfeil zum naechsten Schritt. Als ::after am Kopf und nicht als eigenes Element: er gehoert zur Kette, nicht zum Inhalt - und im Markup stuende er sonst auch hinter dem letzten Schritt, wo er ins Leere zeigt. */ .schritt-kopf::after{ content:''; position:absolute; left:calc(100% + 4px); right:-30px; top:calc(50% - 1px); height:1px; background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--accent) 55%, transparent)); } .schritt-kopf::before{ content:''; position:absolute; right:-30px; top:calc(50% - 3.5px); width:6px; height:6px; z-index:1; border-top:1px solid color-mix(in srgb, var(--accent) 70%, transparent); border-right:1px solid color-mix(in srgb, var(--accent) 70%, transparent); transform:rotate(45deg); } .schritt:last-child .schritt-kopf::after, .schritt:last-child .schritt-kopf::before{display:none;} .schritt h3{ font-size:.94rem; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:12px; } .schritt p{color:var(--sub); font-size:.82rem; line-height:1.6;} /* ============================================================================ Ausgewaehlte Projekte ========================================================================= */ /* Vier Spalten wie auf dem Blatt, solange vier Eintraege da sind. Bei fuenf werden es fuenf statt vier plus einem einsamen Rest - deshalb auto-fit und keine feste Zahl. */ /* Dieselbe Regel wie bei den Leistungen: sechs Zeilen im Raster (Bild, Kunde, Titel, Produktion, Satz, Marken), jede Karte reicht ihre eigenen durch. Dadurch stehen Titel unter Titel und die Marken alle auf einer Linie, egal wie lang der Text darueber ist. */ /* ZWEI DARSTELLUNGEN, EIN AUSSEHEN. Als RASTER (layouts.referenzenReihe = "aus") richten sich die Karten per subgrid aneinander aus: sechs Zeilen im Raster, jede Karte reicht ihre eigenen durch. Als REIHE (= "scroll") gibt es kein gemeinsames Raster mehr - die Karten sind Flex-Kacheln einer Spur, die man seitlich schiebt. Dort richten Mindesthoehen aus, was sonst das subgrid macht. */ /* ============================================================================ Galerie als seitlich schiebbare Reihe kunde.css zieht so ein Band bewusst bis an den Fensterrand: negative Aussenabstaende, Breite gerechnet gegen .wrap. Auf dieser Seite steckt es zusaetzlich in einem .kasten mit eigenem Innenabstand, und um genau dessen Breite ging der Zug daneben. Die Seite liess sich 98 Pixel nach rechts schieben, auf jedem Bildschirm, ohne dass dort etwas zu sehen gewesen waere. In einem umrandeten Kasten ist der Rand ohnehin sichtbar. Ein Band, das darueber hinauslaeuft, sieht nicht nach Absicht aus, sondern nach Fehler. Also bleibt es drin. ========================================================================= */ /* DER KATEGORIENAME STEHT UEBER DER REIHE, NICHT DANEBEN. kunde.css stellt ihn in eine eigene Spalte von 170 Pixeln. Das liest sich gut bei zwei, drei Kategorien mit wenigen Bildern; hier kostet es auf jeder Zeile 194 Pixel Breite, also fast eine ganze Kachel, und das dreimal untereinander. Ueber der Reihe kostet es eine Zeilenhoehe und gibt die Breite frei. */ #gallery .gal-kat{grid-template-columns:1fr; gap:12px;} /* KLEINERE KACHELN. Die Vorgabe ist clamp(240px, 20vw, 300px), gedacht fuer Kundenseiten mit einer Handvoll Bildern. Hier stehen 19 Arbeiten in drei Reihen, und je mehr davon gleichzeitig zu sehen sind, desto eher blaettert jemand weiter. */ #gallery .karten-reihe > .reihe-spur > .gal-kachel{ flex:0 0 clamp(150px, 13vw, 190px); } /* JEDE Kartenreihe bleibt im Kasten, nicht nur die der Galerie. kunde.css zieht ein solches Band bewusst bis an den Fensterrand: width:min(100vw - 14px, 2100px) und ein negativer Aussenabstand, gerechnet gegen .wrap. Auf dieser Seite steckt es zusaetzlich in einem .kasten mit eigenem Innenabstand, und um genau dessen Breite ging der Zug daneben. Gemessen am 21.08.: die Spur war 1266 Pixel breit und begann bei x=0, waehrend der Kasten von 45 bis 1221 reicht. Also 45 Pixel Ueberstand auf jeder Seite - bei den Arbeitsschritten und den Auftraggebern deutlich zu sehen, seit auch sie Reihen sind. In einem umrandeten Kasten ist der Rand ohnehin sichtbar. Ein Band, das darueber hinauslaeuft, sieht nicht nach Absicht aus, sondern nach Fehler. */ .kasten .karten-reihe{ width:auto; max-width:100%; margin-left:0; margin-right:0; padding-inline:0; } /* ============================================================================ Wenn ein Raster zur Reihe wird Die Abschnitte oben sind Raster (display:grid), teils mit subgrid, damit Ueberschrift und Text aller Karten auf einer Linie stehen. Wird derselbe Kasten zur Spur eines Rondells, liefert kunde.css dafuer display:flex - und verliert, weil diese Datei spaeter kommt und mit "#angebote" sogar schwerer wiegt. Deshalb hier ausdruecklich zurueckgenommen. NUR SOLANGE ES WIRKLICH EINE REIHE IST. ui.js setzt data-ruhig, sobald alles ohnehin nebeneinanderpasst - am Rechner also immer, wenn der Regler auf "mobil" steht. Ohne diese Bedingung galten die Regeln auch dort, und aus dem ausgerichteten Vierer-Raster der Leistungen wurde eine Flex-Zeile ohne gemeinsame Spuren: die Treppe, die wir vor zwei Tagen abgeschafft haben, waere zurueckgewesen. ========================================================================= */ .karten-reihe:not([data-ruhig]) > .reihe-spur.offer-grid, .karten-reihe:not([data-ruhig]) > .reihe-spur.fakten, .karten-reihe:not([data-ruhig]) > .reihe-spur.schritte, .karten-reihe:not([data-ruhig]) > .reihe-spur.kunden-grid, .karten-reihe:not([data-ruhig]) > .reihe-spur.price-karten, .karten-reihe:not([data-ruhig]) > .reihe-spur.price-grid{ display:flex !important; /* nowrap ist der eigentliche Punkt. kunde.css setzt bei ".fakten" bewusst flex-wrap:wrap - als Leiste soll sie umbrechen. In einer Spur heisst Umbruch: jede Karte eine eigene Zeile, und aus vier Kennzahlen wurden 4.700 Pixel Hoehe. Gemessen, nicht vermutet. */ flex-wrap:nowrap !important; grid-template-columns:none; grid-template-rows:none; gap:0; border:0; background:none; box-shadow:none; border-radius:0; } /* Die Breite der Karten kommt aus kunde.css. Was hier noch stoert, ist die Trennlinie aus dem Raster: in einer Reihe gehoert sie an jede Karte. */ .karten-reihe:not([data-ruhig]) > .reihe-spur.offer-grid > .offer, .karten-reihe:not([data-ruhig]) > .reihe-spur.fakten > .fakt, .karten-reihe:not([data-ruhig]) > .reihe-spur.schritte > .schritt, .karten-reihe:not([data-ruhig]) > .reihe-spur.kunden-grid > .kunde{ border-left:1px solid var(--linie-innen); border-top:0; border-right:0; border-bottom:0; padding-left:22px; padding-right:22px; margin:0; } .karten-reihe:not([data-ruhig]) > .reihe-spur.offer-grid > *:first-child, .karten-reihe:not([data-ruhig]) > .reihe-spur.fakten > *:first-child, .karten-reihe:not([data-ruhig]) > .reihe-spur.schritte > *:first-child, .karten-reihe:not([data-ruhig]) > .reihe-spur.kunden-grid > *:first-child{border-left:0;} /* subgrid gibt es in einer Reihe nicht: ohne gemeinsame Spuren richtet sich nichts mehr aneinander aus. In einer Reihe steht ohnehin je eine Karte im Bild, die Ausrichtung untereinander ist dort kein Thema. */ .karten-reihe:not([data-ruhig]) > .reihe-spur.offer-grid > .offer{ display:flex; flex-direction:column; } .karten-reihe:not([data-ruhig]) > .reihe-spur.kunden-grid > .kunde{ display:flex; flex-direction:column; justify-content:center; align-items:center; } /* DAS SUBGRID HINTERLAESST EIN ALIGN-SELF. Im Raster sitzt der Name unten in seiner Spur und die Unterzeile oben in ihrer, damit beide an derselben Linie aneinanderstossen. In einer Flexspalte bedeutet dasselbe align-self etwas voellig anderes: dort ist es die QUERachse, also links und rechts. Der Name stand damit rechts, die Zeile darunter links - genau das war auf dem Telefon zu sehen. */ .karten-reihe:not([data-ruhig]) > .reihe-spur.kunden-grid > .kunde > *{ align-self:center; } .karten-reihe:not([data-ruhig]) > .reihe-spur.schritte > .schritt::after{display:none;} /* --- und zurueck zum Raster, sobald alles nebeneinanderpasst -------------- Die Gegenrichtung zu den Regeln darueber. kunde.css setzt an der Spur "display:flex; gap:24px; grid-template-columns:none" - das gilt auch dann noch, wenn ui.js die Reihe als ruhig markiert hat. Abschnitte, deren Raster in dieser Datei nur an einer Klasse haengt (.schritte, .kunden-grid, .price-karten), verloren es dadurch am Rechner: die fuenf Arbeitsschritte standen in einer 1280 Pixel breiten Flex-Zeile statt in fuenf Spalten, und die zehn Auftraggeber in EINER Zeile statt in zweien. Bei .offer-grid und .fakten faellt es nicht auf, deren Regeln tragen ein "#angebote" bzw. "#fakten" und wiegen damit schwerer als kunde.css. -------------------------------------------------------------------------- */ /* EINE RUHENDE REIHE BRAUCHT WEDER ZUG NOCH VERLAUF. kunde.css gibt der Spur "margin:-35px -51px" und denselben Betrag als padding. Das ist Absicht: die Spur schneidet ab (overflow), und ohne den groesseren Kasten waere der Saum um eine Karte mit weggeschnitten. Der Inhalt sitzt trotzdem richtig, weil das padding ihn wieder hereinholt. Sobald die Reihe aber still steht und wieder ein Raster ist, rechnet das Raster seine Spalten im groesseren Kasten - und ragte damit 51 Pixel links und rechts aus dem Rahmen. Genau das war auf dem Bildschirm zu sehen. Gemessen: Kasten 84..1182, Spur 32..1233. Steht sie still, gibt es auch nichts abzuschneiden. Also beides auf null. */ .karten-reihe[data-ruhig] > .reihe-spur{ margin:0; padding:0; -webkit-mask-image:none; mask-image:none; } .karten-reihe[data-ruhig] > .reihe-spur.schritte{ display:grid; grid-template-columns:repeat(5, 1fr); gap:0; } .karten-reihe[data-ruhig] > .reihe-spur.kunden-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:1px; background:var(--linie-innen); border:1px solid var(--linie-innen); } .karten-reihe[data-ruhig] > .reihe-spur.price-karten{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; } /* ============================================================================ Technologiestack als Laufband (layouts.partnerBand) Zwei gleiche Listen hintereinander, die Spur schiebt um genau die halbe Breite. Damit steht nach einem Durchlauf dasselbe an derselben Stelle, und der Sprung zurueck ist unsichtbar. BEI "mobil" GILT AM RECHNER GAR NICHTS DAVON. Alles, was das Band ausmacht, steht deshalb in der Medienabfrage weiter unten. Draussen steht nur die eine Zeile, die die zweite Liste ausblendet - sonst staende der Stack am Rechner zweimal untereinander. Der erste Versuch hatte es andersherum: die Bandregeln galten immer, und nur einzelne wurden am Rechner zurueckgenommen. Eine davon war "min-width:150px" fuer die Kaesten. Mit den 20 Pixeln Abstand des Rasters ergab das 1170 Pixel in einem 1098 Pixel breiten Kasten, und der siebte Eintrag stand 71 Pixel ausserhalb des Rahmens. ========================================================================= */ #partner .partner-band .partner-grid[aria-hidden]{display:none;} @media(max-width:760px){ #partner .partner-band{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } #partner .partner-band .partner-grid[aria-hidden]{display:flex;} #partner .partner-band-spur{ display:flex; width:max-content; animation:partner-band 26s linear infinite; } #partner .partner-band-spur .partner-grid{display:flex; gap:0; flex:none;} #partner .partner-band-spur .partner{ flex:none; width:auto; min-width:150px; grid-column:auto; border-left:1px solid var(--linie-innen); border-top:0; } #partner .partner-band:hover .partner-band-spur{animation-play-state:paused;} } @keyframes partner-band{ to{ transform:translateX(-50%); } } /* Ein Band, das von allein laeuft, ist genau das, was diese Einstellung meint. Schieben laesst es sich dann von Hand. */ @media(prefers-reduced-motion: reduce){ #partner .partner-band-spur{animation:none;} #partner .partner-band{overflow-x:auto;} } /* ============================================================================ Auftraggeber (layouts.referenzen: "marken") Eine Leiste aus Namen, mehr nicht. Sie beantwortet in drei Sekunden die Frage, die ein Studioleiter zuerst stellt: fuer wen hat der schon gearbeitet. Bilder und Beschreibungen stehen weiter unten in der Galerie und wuerden hier nur bremsen. Kein festes Raster, sondern "auto-fit": zehn Namen fuellen die Zeilen, ein elfter rutscht nach, ohne dass jemand eine Spaltenzahl nachzieht. ========================================================================= */ .kunden-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); /* Ein Pixel Abstand, gefuellt von der Rahmenfarbe: so entsteht das Liniennetz aus einer einzigen Flaeche, statt aus zwanzig Raendern, die sich an den Kreuzungen verdoppeln. */ gap:1px; background:var(--linie-innen); border:1px solid var(--linie-innen); } /* SUBGRID, DAMIT DIE UNTERZEILEN AUF EINER LINIE STEHEN. "Mölnlycke Health Care" bricht auf zwei Zeilen, "AKQA" nicht. In einer Flex-Spalte rutscht die Unterzeile dadurch je Kachel unterschiedlich weit nach unten, und die Reihe bekommt eine Treppe. Mit subgrid teilen sich alle Kacheln EINER Zeile dieselben beiden Spuren: die erste so hoch wie der laengste Name, die zweite fuer die Unterzeile. */ .kunde{ display:grid; grid-template-rows:subgrid; grid-row:span 2; justify-items:center; align-content:center; gap:7px; text-align:center; min-height:104px; padding:20px 16px; background:var(--surface); color:var(--ink); text-decoration:none; transition:background .18s ease, color .18s ease; } /* Der Name sitzt unten in seiner Spur, die Unterzeile oben in ihrer. So stossen beide an derselben Linie aneinander, egal wie hoch die Spur ist. */ .kunde .kunde-name, .kunde .kunde-logo{align-self:end;} .kunde .kunde-rolle{align-self:start;} /* Ohne subgrid (aeltere Browser) faellt es auf zwei feste Zeilen zurueck. Nicht so genau, aber ebenfalls ohne Treppe. */ @supports not (grid-template-rows: subgrid){ .kunde{display:flex; flex-direction:column; justify-content:center;} .kunde-name{min-height:2.4em; display:flex; align-items:center;} } a.kunde:hover{background:#0C1014; color:var(--accent);} a.kunde:hover .kunde-rolle{color:var(--accent);} .kunde-name{ font-family:var(--schrift-ueberschrift); font-weight:800; font-size:1.02rem; letter-spacing:-0.01em; text-transform:uppercase; line-height:1.2; } .kunde-rolle{ font-family:var(--schrift-mono); font-size:.63rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--sub); transition:color .18s ease; } /* Logos bekommen eine gemeinsame Hoehe statt einer gemeinsamen Breite: ein breites Wortlogo und ein quadratisches Zeichen wirken sonst verschieden gross, obwohl sie dieselbe Flaeche haben. */ .kunde-logo{ max-width:100%; max-height:30px; width:auto; height:auto; object-fit:contain; } @media(max-width:760px){ .kunden-grid{grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));} .kunde{min-height:86px; padding:15px 10px;} .kunde-name{font-size:.9rem;} } #referenzen .ref-grid:not(.reihe-spur){ display:grid; grid-template-columns:repeat(auto-fit, minmax(196px, 1fr)); gap:0; grid-template-rows:auto auto auto auto 1fr auto; } #referenzen .ref-grid:not(.reihe-spur) .ref-karte{grid-row:span 6;} @supports (grid-template-rows: subgrid){ #referenzen .ref-grid:not(.reihe-spur) .ref-karte{ display:grid; grid-template-rows:subgrid; } } @supports not (grid-template-rows: subgrid){ #referenzen .ref-grid:not(.reihe-spur) .ref-karte{display:flex; flex-direction:column;} #referenzen .ref-grid:not(.reihe-spur) .ref-titel{min-height:2.4em;} #referenzen .ref-grid:not(.reihe-spur) .ref-marken{margin-top:auto;} } #referenzen .reihe-spur.ref-grid .ref-karte{ display:flex; flex-direction:column; } #referenzen .reihe-spur.ref-grid .ref-titel{min-height:2.7em;} #referenzen .reihe-spur.ref-grid .ref-text{min-height:4.7em;} #referenzen .reihe-spur.ref-grid .ref-marken{margin-top:auto; align-self:stretch;} /* Die Pfeile der Reihe in der Sprache dieser Seite. */ #referenzen .reihe-knopf{ background:rgba(8,10,14,.85); border:1px solid var(--line); border-radius:0; color:var(--ink); } #referenzen .reihe-knopf:hover{border-color:var(--accent); color:var(--accent);} #referenzen .ref-karte{ background:transparent; border:0; border-left:1px solid var(--linie-innen); padding:0 22px; gap:0; } #referenzen .ref-karte:first-child{border-left:0; padding-left:0;} .ref-bild{ position:relative; aspect-ratio:16 / 9; overflow:hidden; margin-bottom:18px; background:#0B0E13; } .ref-bild img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s cubic-bezier(.3,.7,.3,1), opacity .2s ease;} /* Ein Bild, das sich oeffnen laesst, muss auch danach aussehen. */ .ref-bild[data-lupe-klick]{cursor:pointer;} .ref-bild[data-lupe-klick]:hover img{transform:scale(1.045);} .ref-bild[data-lupe-klick]::after{ content:'B'; position:absolute; right:8px; bottom:8px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; font-family:var(--schrift-mono); font-size:1rem; line-height:1; color:#05080C; background:var(--accent); opacity:0; transition:opacity .2s ease; pointer-events:none; } .ref-bild[data-lupe-klick]:hover::after{opacity:1;} /* Eine Karte ohne Bild haelt den Platz trotzdem frei. Der leere Rahmen sagt ausserdem, dass hier ein Bild fehlt, und nicht, dass das Projekt keines verdient. */ #referenzen .ref-karte:not(.hat-bild) .ref-bild{ border:1px dashed rgba(255,255,255,0.10); } #referenzen .ref-kunde{ font-family:var(--schrift-mono); font-size:.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:7px; } #referenzen .ref-titel{ font-size:.95rem; text-transform:uppercase; letter-spacing:0.01em; margin-bottom:9px; } #referenzen .ref-ueber{ font-family:var(--schrift-mono); font-size:.68rem; letter-spacing:0.06em; color:var(--sub); opacity:.8; margin-bottom:8px; } #referenzen .ref-text{ font-size:.82rem; line-height:1.55; color:var(--sub); margin-bottom:14px; } /* KEIN margin-top:auto. Die Zeile schob die Marken an den unteren Rand ihrer Rasterzeile - bei Karten mit nur einer Markenzeile also 36 Pixel tiefer als bei denen mit zweien. Das Ausrichten macht schon das subgrid. */ #referenzen .ref-marken{gap:7px; align-self:start; padding-top:0;} #referenzen .ref-marken{display:flex; flex-wrap:wrap;} /* Eine Marke bricht NICHT um. "Unreal Engine 5" stand vorher zweizeilig da, die "5" allein in der naechsten Zeile und in einem eigenen Kaestchen. */ #referenzen .ref-marken span{ font-family:var(--schrift-mono); font-size:.64rem; letter-spacing:0.03em; color:#AEB3BB; background:transparent; white-space:nowrap; border:1px solid rgba(255,255,255,0.16); border-radius:0; padding:5px 8px; } /* ============================================================================ Warum Kunden mit mir arbeiten ========================================================================= */ /* kunde.css macht aus der Kennzahlenleiste einen eigenen Kasten mit Rahmen, Flaeche und Schein. Hier steckt sie schon in einem Kasten - zwei Rahmen ineinander lassen dem Text keine Luft mehr, und genau das war zu sehen. */ #fakten .fakten{ display:grid; grid-template-columns:repeat(4, 1fr); gap:0; margin-top:20px; border:0; background:transparent; box-shadow:none; border-radius:0; } #fakten .fakt{ display:flex; align-items:flex-start; gap:18px; padding:4px 30px; border-left:1px solid var(--linie-innen); background:transparent; border-radius:0; } #fakten .fakt:first-child{border-left:0; padding-left:0;} #fakten .fakt:last-child{padding-right:0;} /* kunde.css setzt die Trennlinie als ::before auf jede Kennzahl ausser der ersten. Hier trennt der Rahmen links - beides zusammen waere ein Doppelstrich. */ #fakten .fakt + .fakt::before{display:none;} #fakten .fakt-icon{ width:44px; height:44px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:radial-gradient(100% 100% at 50% 20%, rgba(255,255,255,0.045) 0%, transparent 72%); } #fakten .fakt-icon svg{ width:26px; height:26px; fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; } #fakten .fakt-text{display:flex; flex-direction:column;} /* Der Wert steht OBEN und gross, das Wort darunter. Im Markup kommt der Name zuerst - hier dreht die Reihenfolge das um, statt das Bauteil zu aendern: auf den Kundenvorlagen ist die Leiste eine Tabelle "Name: Wert", und die soll sie bleiben. */ #fakten .fakt-wert{ order:1; font-family:var(--schrift-ueberschrift); font-weight:800; font-size:1.5rem; line-height:1.05; color:var(--ink); letter-spacing:-0.01em; } #fakten .fakt-name{ order:2; font-family:var(--schrift-ueberschrift); font-weight:800; font-size:.94rem; text-transform:uppercase; letter-spacing:0.01em; color:var(--ink); margin-top:6px; } #fakten .fakt-satz{ order:3; font-size:.81rem; line-height:1.55; color:var(--sub); margin-top:12px; } /* ============================================================================ Preise kunde.css haelt den Preisblock zugeklappt: dort ist er ein Aufklapper mit dem Knopf "Preise anzeigen". Auf dem Blatt stehen die Preise offen da, und das ist auch die Aussage des Abschnitts. Deshalb hier aufgeschoben. ========================================================================= */ .price-body, .price-body-offen{ margin:0; max-height:none; overflow:visible; } .price-toggle{display:none;} .price-karten{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:8px; } .price-karte{ border:1px solid var(--line); background:rgba(255,255,255,0.015); padding:26px 24px 28px; display:flex; flex-direction:column; } .pk-name{ font-family:var(--schrift-ueberschrift); font-weight:800; font-size:.94rem; text-transform:uppercase; letter-spacing:0.01em; color:var(--ink); } .pk-sub{font-size:.82rem; color:var(--sub); margin-top:6px;} .pk-preis{display:flex; align-items:baseline; gap:.35em; margin:20px 0 18px;} .pk-davor{font-size:.9rem; color:var(--sub);} .pk-zahl{ font-family:var(--schrift-ueberschrift); font-weight:800; font-size:2rem; letter-spacing:-0.02em; color:var(--accent); } .pk-einheit{font-size:.85rem; color:var(--sub);} .pk-punkte{list-style:none; display:flex; flex-direction:column; gap:9px;} .pk-punkte li{ font-size:.82rem; line-height:1.5; color:var(--sub); padding-left:20px; position:relative; } .pk-punkte li::before{ content:'\2713'; position:absolute; left:0; top:0; color:var(--accent); font-size:.85em; } .price-karten-fuss{ font-size:.78rem; color:var(--sub); margin-top:20px; } /* ============================================================================ Abschlussband: Preisauszug, Aufruf, Kontakt ========================================================================= */ .kasten-abschluss{ display:grid; grid-template-columns:1.75fr 1fr; gap:0; padding:0; align-items:stretch; } .kasten-abschluss > *{padding:clamp(24px, 2.6vw, 36px);} .ab-kontakt{border-left:1px solid var(--linie-innen);} /* Die mittlere Spalte: der Aufruf, rechts das Portrait, und aus der unteren linken Ecke ein Schein in der Zierfarbe. */ .ab-aufruf{ position:relative; overflow:hidden; display:flex; align-items:center; gap:20px; background: radial-gradient(120% 150% at 0% 100%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, color-mix(in srgb, var(--accent) 6%, transparent) 34%, transparent 66%), #070A0E; } .ab-aufruf-text{position:relative; z-index:1; flex:1 1 auto;} .ab-aufruf-text .kasten-label{color:var(--ink); opacity:.85;} .ab-aufruf-text h2{ font-size:clamp(1.15rem, 1.9vw, 1.55rem); line-height:1.15; text-transform:uppercase; margin-bottom:16px; } .ab-aufruf-text p{ font-size:.86rem; color:#C2C6CC; margin-bottom:22px; max-width:38ch; } .ab-portrait{ width:clamp(160px, 17vw, 240px); align-self:flex-end; object-fit:cover; object-position:top center; display:block; margin:0 -8px -34px 0; -webkit-mask-image:linear-gradient(180deg, #000 78%, transparent 100%); mask-image:linear-gradient(180deg, #000 78%, transparent 100%); } /* FREIGESTELLTES FOTO: KEINE VERLAUFSMASKE. Die Maske oben blendet die Unterkante aus, damit ein rechteckiges Foto nicht als Kante im Band steht. Ein freigestelltes PNG hat gar keine Kante, dort wuerde sie nur die Beine wegblenden. loader.js setzt data-frei anhand der Dateiendung, siehe setzeBilder(). */ .ab-portrait[data-frei]{ -webkit-mask-image:none; mask-image:none; align-self:flex-end; /* Der rechte Rand statt der -8px von oben: das freigestellte Bild hat keinen Beschnitt mehr, den man an die Kante schieben moechte, und rueckt damit 12 Pixel nach links vom Rahmen weg. Unten kein Zug ins Minus, der gehoert zur Verlaufsmaske. */ margin:0 4px 0 0; } /* Die Profilzeichen unter den Kontaktdaten. Eine Zeile, gleich grosse Flaechen, damit ein breites Wortzeichen neben einem quadratischen nicht groesser wirkt. */ .ab-profile{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; padding-top:22px; border-top:1px solid var(--linie-innen); } .ab-profile[hidden]{display:none;} .profil{ display:flex; align-items:center; justify-content:center; width:40px; height:40px; flex:none; border:1px solid var(--linie-innen); color:var(--sub); transition:color .18s ease, border-color .18s ease, background .18s ease; } .profil svg{width:19px; height:19px; fill:currentColor;} .profil:hover{color:var(--accent); border-color:var(--accent); background:rgba(201,242,77,.07);} .profil:focus-visible{outline:2px solid var(--accent); outline-offset:2px;} .ab-daten{list-style:none; display:flex; flex-direction:column; gap:20px; margin-top:22px;} .ab-daten li{display:flex; align-items:center; gap:14px; font-size:.86rem;} .ab-daten a{color:var(--ink); text-decoration:none;} .ab-daten a:hover{color:var(--accent);} .ab-zeichen{ width:36px; height:36px; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.14); } .ab-zeichen svg{ width:17px; height:17px; fill:none; stroke:var(--ink); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; } /* ============================================================================ Anfrageformular und Fragen ========================================================================= */ .cform input, .cform select, .cform textarea{ background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:0; color:var(--ink); } .cform input:focus, .cform select:focus, .cform textarea:focus{ border-color:var(--accent); outline:none; } /* Die aufgeklappte Liste zeichnet das Betriebssystem, nicht die Seite. Es nimmt dafuer die Farben des