/* ---------- Schriften ---------- Roboto und Roboto Condensed, selbst gehostet (kein Abruf bei Google). Lizenz: SIL Open Font License 1.1 - die Lizenztexte liegen als roboto-OFL.txt und roboto-condensed-OFL.txt neben den Schriftdateien in assets/fonts/ und muessen bei jeder Weitergabe dabeibleiben. Variable Fonts: eine Datei deckt alle Strichstaerken ab. */ /* Roboto - latin-ext */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300 700; font-stretch: 100%; font-display: swap; src: url("../fonts/roboto-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Roboto - latin */ @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 300 700; font-stretch: 100%; font-display: swap; src: url("../fonts/roboto-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Roboto Condensed - latin-ext */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/roboto-condensed-latin-ext.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Roboto Condensed - latin */ @font-face { font-family: 'Roboto Condensed'; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/roboto-condensed-latin.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root{ --navy:#0F213D; --blue:#154D80; --blue-mid:#597195; --green:#B8D62B; --green-dark:#5F7A12; --ink:#363636; --paper:#F7F7F7; --white:#FFFFFF; --line:#DFE3E8; --display:"Roboto Condensed","Roboto",Arial,sans-serif; --body:"Roboto",Arial,sans-serif; --wrap:1120px; --pad:clamp(1.25rem,5vw,2.5rem); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--white);color:var(--ink); font-family:var(--body);font-weight:300;font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; } .wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)} a{color:var(--green-dark);text-decoration:none;border-bottom:1px solid rgba(95,122,18,.35)} a:hover{border-bottom-color:var(--green-dark)} :focus-visible{outline:3px solid var(--green);outline-offset:3px} h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--blue);margin:0;line-height:1.1} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} /* ---------- Eyebrow: Instrumentenbeschriftung ---------- */ .eyebrow{ font-family:var(--display);font-weight:700;font-size:.72rem; letter-spacing:.22em;text-transform:uppercase;color:var(--blue-mid); margin:0 0 1rem;display:flex;align-items:center;gap:.7rem; } .eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px} /* ---------- Header ---------- */ .site-head{ position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94); backdrop-filter:blur(8px);border-bottom:1px solid var(--line); } .head-in{display:flex;align-items:center;gap:1.5rem;min-height:76px} .brand{display:block;border:0;flex:0 0 auto} .logo{height:38px;width:auto;display:block} .logo .st0{fill:none;stroke:#1C4E80;stroke-width:13;stroke-miterlimit:10} .logo .st1{fill:#0F213D} .logo .st2{fill:#1C4E80} /* Abstand atmet mit der Fensterbreite (5. August 2026): Seit dem achten Menuepunkt ("Uebernahme") braeuchte die Zeile sonst bis ~1000 px Breite. */ .site-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:clamp(.95rem,1.7vw,1.6rem);align-items:center} /* Haus-Symbol als erster Menuepunkt (5. August 2026, Betreiberwunsch): zurueck zum Seitenanfang, wie der Klick aufs Logo. */ .site-nav .nav-home{display:flex;align-items:center;border-bottom:0;padding:.2rem 0} .site-nav .nav-home svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} /* Die Unterstrich-Reserve unten (2 px Polster + 2 px Rand) wird oben gespiegelt, damit der Text in seiner Flexbox mittig sitzt - sonst haengen Haus-Symbol und Sprachwahl optisch 2 px unter der Textlinie (Befund des Betreibers, 6. August 2026). Mobil ohne Wirkung, dort setzt padding:.5rem 0 alle Seiten neu. */ .site-nav a{ font-family:var(--display);font-size:.95rem;letter-spacing:.03em; color:var(--blue);border-bottom:2px solid transparent; padding-top:4px;padding-bottom:2px; } .site-nav a:hover{border-bottom-color:var(--green)} /* Menüschalter: ohne JavaScript über ein verstecktes Kontrollkästchen. Das Kästchen bleibt bedienbar (nicht display:none), damit es mit der Tastatur erreichbar ist und mit der Leertaste geschaltet werden kann. Oberhalb der Umbruchstelle ist der Schalter unsichtbar und die Navigation steht ohnehin offen. */ .nav-toggle{display:none} .nav-button{display:none} /* ---------- Buttons ---------- */ .btn{ display:inline-block;font-family:var(--display);font-weight:700;font-size:1rem; letter-spacing:.04em;padding:.85rem 1.6rem;border:2px solid transparent;border-radius:2px; background:var(--green);color:var(--navy);transition:transform .15s ease,background .15s ease; } .btn:hover{background:#C6E23A;transform:translateY(-1px)} .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:var(--white)} .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:var(--green)} /* ---------- Hero: Messschirm ---------- */ .hero{position:relative;background:var(--navy);color:#E8EDF4;overflow:hidden} .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background-image: repeating-linear-gradient(to right,rgba(184,214,43,.09) 0 1px,transparent 1px 56px), repeating-linear-gradient(to bottom,rgba(184,214,43,.09) 0 1px,transparent 1px 56px); mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.15)); } .trace{position:absolute;right:0;bottom:0;width:min(56%,660px);height:auto;opacity:.9;pointer-events:none} .trace path{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round; stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.2s .3s cubic-bezier(.2,.7,.3,1) forwards} @keyframes draw{to{stroke-dashoffset:0}} /* Polster am 6. August 2026 verkleinert (Betreiberwunsch): Mit der Standzeile des Karussells war der Held ueber die Bildschirmhoehe hinausgewachsen - Ziel ist, dass die beiden Knoepfe auf einer Schirmseite (~790 px nutzbare Hoehe) sichtbar bleiben. */ .hero-in{position:relative;z-index:2;padding:clamp(3rem,7vw,4.2rem) 0 clamp(2.5rem,5vw,3.3rem);max-width:44rem} .hero .eyebrow{color:var(--green)} .hero .eyebrow::after{background:rgba(184,214,43,.3)} .hero h1{ color:var(--white);font-size:clamp(2.3rem,5.6vw,3.9rem);letter-spacing:-.015em;margin-bottom:1.2rem; } .hero h1 em{font-style:normal;color:var(--green)} /* Wechselzeile im Aushaengeschild (6. August 2026, Betreiberwunsch; am selben Tag zum Karussell ausgebaut - Pfeile, Punkte, vierte Zeile): Die echte H1 bleibt stabil die erste Zeile - Suchmaschinen und Vorleser sehen genau eine Ueberschrift, die weiteren Zeilen sind aria-hidden. Alle Zeilen liegen im selben Grid-Feld, die laengste bestimmt die Hoehe: beim Wechsel springt nichts. Takt, Pfeile und Punkte macht wechsel.js ueber die Klassen .js und .aktiv; ohne Skript steht die erste Zeile still und Bedienelemente gibt es keine (Muster des Referenz-Sliders). Der anfaengliche Keyframe-Zeitplan ist mit dem Karussell-Ausbau entfallen - er war fest auf drei Zeilen verdrahtet. */ .hero-wechsel{display:grid;margin-bottom:1.2rem;position:relative} .hero-wechsel .folie{ grid-area:1/1;margin:0;opacity:0; font-family:var(--display);font-weight:700;line-height:1.1; color:var(--white);font-size:clamp(2.3rem,5.6vw,3.9rem);letter-spacing:-.015em; } .hero-wechsel .folie:first-child{opacity:1} .hero-wechsel .folie em{font-style:normal;color:var(--green)} /* opacity:0 steht hier nochmals, damit die spaetere Regel die :first-child-Ausnahme ueberstimmt (gleiche Spezifitaet). */ .hero-wechsel.js .folie{opacity:0;transition:opacity .9s ease} .hero-wechsel.js .folie.aktiv{opacity:1} @media print, (prefers-reduced-motion:reduce){ .hero-wechsel .folie{transition:none} } /* Punkte mittig unter den Zeilen (Betreiberwunsch) */ .wechsel-stand{grid-row:2;justify-self:center;display:flex;align-items:center;gap:.9rem;margin-top:.5rem} .wechsel-punkte{display:inline-flex} .wechsel-punkt{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center; padding:0;border:0;background:none;cursor:pointer} .wechsel-punkt::before{content:"";width:10px;height:10px;border-radius:50%; border:2px solid rgba(232,237,244,.55);transition:border-color .15s ease,background .15s ease} .wechsel-punkt:hover::before{border-color:var(--green)} .wechsel-punkt.aktiv::before{background:var(--green);border-color:var(--green)} .wechsel-pfeil{width:40px;height:40px;display:flex;align-items:center;justify-content:center; font-family:var(--display);font-size:1.5rem;line-height:1;padding:0 0 .2rem; border:1px solid rgba(232,237,244,.35);border-radius:50%;background:none;color:#E8EDF4; cursor:pointer;transition:border-color .15s ease,color .15s ease} .wechsel-pfeil:hover{border-color:var(--green);color:var(--green)} /* Oberhalb der Klappmenue-Grenze flankieren die Pfeile die Zeilen (Betreiberwunsch "rechts und links"). Die 37 px rechnen die Standzeile aus der Hoehenmitte heraus: halbe Standzeile samt Abstand (17 px = (8 + 26)/2) plus halbe Pfeilhoehe (20 px) - gemessen sitzt die Pfeilmitte damit auf der Zeilenmitte. Wer Standzeilen-Abstand oder Punktgroesse aendert, rechnet hier nach. Unterhalb wandern beide Pfeile in die Standzeile neben die Punkte, neben 2.3-rem-Zeilen ist seitlich kein Platz. */ @media (min-width:941px){ .wechsel-pfeil{position:absolute;top:calc(50% - 37px)} .wechsel-zurueck{left:-3.6rem} .wechsel-vor{right:-3.6rem} } .hero-lead{font-size:clamp(1.05rem,2.1vw,1.28rem);color:#C3CDDC;font-weight:300;margin-bottom:2rem} .hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center} /* ---------- Kenndaten: Datenblatt-Streifen ---------- */ .specs{background:var(--paper);border-bottom:1px solid var(--line)} .specs-in{padding:clamp(2.5rem,6vw,3.5rem) 0} .spec-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line); grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr))} /* Gruene Oberkante wie bei den .card-Kacheln (6. August 2026, Betreiberanweisung - einheitliche Kachelsprache auf der ganzen Seite). */ .spec{background:var(--white);padding:1.5rem 1.4rem;border-top:4px solid var(--green)} .spec dt{font-family:var(--display);font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;color:var(--blue-mid);margin-bottom:.55rem} .spec dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.55rem; color:var(--blue);line-height:1.15} .spec dd small{display:block;font-family:var(--body);font-weight:300;font-size:.9rem; color:var(--ink);letter-spacing:0;margin-top:.35rem;line-height:1.45} /* ---------- Sektionen ---------- */ .band{padding:clamp(3.5rem,8vw,5.5rem) 0} .band-alt{background:var(--paper)} .band-dark{background:var(--navy);color:#C3CDDC} .band-dark h2,.band-dark h3{color:var(--white)} .band-dark .eyebrow{color:var(--green)} .band-dark .eyebrow::after{background:rgba(184,214,43,.28)} .band h2{font-size:clamp(1.8rem,3.6vw,2.5rem);margin-bottom:1rem;letter-spacing:-.01em} /* Blog-Übersicht: die klassenlose H1 bekommt dieselbe Luft zur Lede wie die Abschnitts-H2s (7. August 2026, Betreiber-Befund: „gequetscht"). Artikel-H1s überschreibt .artikel h1 weiter unten. */ .band h1{margin-bottom:1rem} /* FAQ-Sprungliste (7. August 2026, Betreiberauftrag): alle Fragen als Anker am Seitenkopf, die Antworten bleiben offen sichtbar — bewusst kein Aufklappen. scroll-margin hält die Ziel-Frage unter dem klebenden Kopfbereich sichtbar. */ .faq-sprung{margin:0 0 2.4rem;padding-left:1.2rem;font-size:.95rem;line-height:1.55} .faq-sprung li{margin:.2rem 0} @media(min-width:760px){.faq-sprung{columns:2;column-gap:2.5rem}} h3[id]{scroll-margin-top:5.5rem} /* Blog-Blätternavigation (7. August 2026): erscheint erst ab mehr als neun Beiträgen — 3×3-Matrix je Seite, statische Links statt Slider (Entscheidung gegen einen JS-Slider, ARBEITSSTAND-Block 7. August). */ .blog-seiten{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.4rem} .blog-seiten-stand{color:var(--blue-mid);font-family:var(--display);font-size:.9rem} /* Lede ohne Breitendeckel (6. August 2026, Betreiber-Befund: der alte Deckel von 44 rem brach die Einleitung bei zwei Dritteln der Zeile um und wirkte neben der voll laufenden H2 unfertig). */ .lede{font-size:1.12rem} /* ---------- Ablauf ---------- */ .steps{margin-top:2.5rem;border-top:1px solid var(--line)} .step{display:grid;grid-template-columns:4.5rem 1fr;gap:1.5rem; padding:1.6rem 0;border-bottom:1px solid var(--line);align-items:start} .step-no{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--green-dark); line-height:1;padding-top:.15rem} .step h3{font-size:1.22rem;margin-bottom:.4rem} .step p{margin:0;font-size:1rem} /* ---------- Kompetenzen ---------- */ /* .chips/.chip entfernt am 6. August 2026 (Betreiberwunsch): Die vier Schlagwort-Zeilen unter den Leistungen-Kacheln standen wortgleich schon in den Kacheln selbst - Streuung ohne Mehrwert. */ .limits{margin-top:2.2rem;padding:1.3rem 1.5rem;border-left:3px solid var(--green); background:var(--white);font-size:1rem} .band-alt .limits{background:var(--white)} /* ---------- Bildband: randlos über die volle Breite ---------- */ .bildband{display:block;background:var(--navy)} .bildband img{display:block;width:100%;height:clamp(160px,24vw,320px); object-fit:cover;object-position:center} /* ---------- Referenzen ---------- */ .cards{display:grid;gap:1.5rem;margin-top:2.5rem; /* auto-fill statt auto-fit (7. August 2026, Betreiber-Befund): bei einer Einzelkarte — Blogseite 2 — bleiben die leeren Spalten stehen, die Karte behält Kachelgröße statt volle Breite. Volle Raster rendern unverändert. */ grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr))} /* Kacheln einheitlich in der Akzentsprache der Referenzkarten (Betreiberwunsch vom 6. August 2026, vorher trug nur der Slider beides): gruene Oberkante fuer alle Kacheln, Flaechenfarbe im Kontrast zum Band - Papier auf weissen Baendern, Weiss auf Papier-Baendern (.band-alt), dieselbe Logik wie bei .hervor. */ .card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--green); padding:1.8rem 1.7rem;display:flex;flex-direction:column} .band-alt .card{background:var(--white)} .card .tag{font-family:var(--display);font-size:.7rem;letter-spacing:.18em; text-transform:uppercase;color:var(--green-dark);margin-bottom:.9rem} .card h3{font-size:1.32rem;margin-bottom:.7rem} .card p{font-size:1rem} .card .meta{margin-top:auto;padding-top:1.1rem;font-family:var(--display); font-size:.85rem;letter-spacing:.04em;color:var(--blue-mid);border-top:1px solid var(--line)} /* Bild in einer Referenzkarte, randlos bis an die Kartenkante. Die negativen Aussenabstaende heben genau die Polsterung von .card auf (1.8rem / 1.7rem); wird die Polsterung geaendert, muessen diese Werte mitgehen. aspect-ratio haelt den Platz schon vor dem Laden frei, damit der Text nicht springt. Karten ohne Bild bleiben davon unberuehrt. height:auto ist noetig, nicht schmueckend: Das height-Attribut im HTML wirkt als Voreinstellung und wuerde aspect-ratio sonst aushebeln (wie bei .portrait weiter unten). */ .card-img{display:block;width:calc(100% + 3.4rem);height:auto;aspect-ratio:3/2; object-fit:cover;margin:-1.8rem -1.7rem 1.4rem;border-bottom:1px solid var(--line)} /* ---------- Labor ---------- */ .kit{display:grid;gap:1px;margin-top:2.5rem;background:rgba(255,255,255,.13); grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))} /* Gruene Oberkante wie bei den .card-Kacheln (6. August 2026, Betreiberanweisung - einheitliche Kachelsprache auch im dunklen Band). */ .kit div{background:var(--navy);padding:1.4rem 1.3rem;border-top:4px solid var(--green)} .kit h3{font-size:1rem;letter-spacing:.03em;margin-bottom:.5rem} .kit p{font-size:.97rem;margin:0;color:#AEBACB} /* Helle Kacheln und Hinweiskaesten im dunklen Band (EMV-Block, 6. August 2026): Die Bandfarben - helles Grau der Absaetze, Weiss der Ueberschriften - wuerden auf Papier- und weissen Flaechen durchschlagen; hier gilt wieder die dunkle Schrift. */ .band-dark .card{color:var(--ink)} .band-dark .card h3{color:var(--blue)} .band-dark .limits{color:var(--ink)} /* ---------- Über mich ---------- */ .about{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:start; grid-template-columns:minmax(200px,270px) 1fr} .portrait{aspect-ratio:4/5;width:100%;height:auto;display:block;object-fit:cover; background:var(--paper);border:1px solid var(--line)} /* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */ .legal{max-width:46rem} .legal h2{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:.6rem} .legal h3{font-size:1.12rem;margin:2.2rem 0 .5rem} .legal h3:first-of-type{margin-top:1.8rem} .legal p{font-size:1rem} .legal a{word-break:break-word} .legal .anschrift{font-style:normal;margin:0 0 1.1em} .legal .zurueck{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line)} /* AGB: Paragraphen und haengend eingerueckte Ziffern */ .legal .par{color:var(--green-dark)} .legal .stand{font-family:var(--display);font-size:.78rem;letter-spacing:.16em; text-transform:uppercase;color:var(--blue-mid);margin-bottom:2.5rem} .legal .ziffer{display:grid;grid-template-columns:3rem 1fr;gap:.5rem;margin:0 0 1em} .legal .ziffer .nr{font-family:var(--display);font-weight:700;color:var(--blue-mid)} .legal ul{margin:0 0 1.1em 3.5rem;padding:0} .legal li{margin:.25rem 0} @media (max-width:760px){ .legal .ziffer{grid-template-columns:2.4rem 1fr;gap:.4rem} .legal ul{margin-left:2.8rem} } /* ---------- Abschluss ---------- */ .cta{background:var(--blue);color:var(--white);text-align:center} .cta h2{color:var(--white);font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:.9rem} .cta p{color:#CBD8E8;max-width:34rem;margin-inline:auto;margin-bottom:1.9rem} /* Klartext-Kontakt unter dem Knopf (5. August 2026): fuer alle, bei denen der mailto-Link kein Mailprogramm oeffnet - kopierbar und antippbar. */ .cta .cta-kontakt{margin:1.2rem auto 0;font-size:.95rem;color:#CBD8E8} .cta .cta-kontakt a{color:var(--white);border-bottom-color:rgba(255,255,255,.35)} .cta .cta-kontakt a:hover{border-bottom-color:var(--green)} /* Querverweis fuer Zoegernde unter dem Kontaktblock (5. August 2026): wer noch nicht schreiben will, findet zuerst die Antworten auf die ueblichen Vorbehalte. */ .cta .cta-fragen{margin:2.2rem auto 0;font-size:.9rem;color:#A9BBD2;max-width:30rem} .cta .cta-fragen a{color:var(--white);border-bottom-color:rgba(255,255,255,.35)} .cta .cta-fragen a:hover{border-bottom-color:var(--green)} /* ---------- Fuß ---------- */ .site-foot{background:var(--navy);color:#8C9AB0;padding:3rem 0 2.5rem;font-size:.94rem} .foot-in{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))} .site-foot .logo{height:34px} .site-foot .logo .st0{stroke:var(--white)} .site-foot .logo .st1{fill:var(--white)} .site-foot .logo .st2{fill:var(--green)} .site-foot h4{font-family:var(--display);font-size:.72rem;letter-spacing:.18em; text-transform:uppercase;color:var(--white);margin:0 0 .8rem} .site-foot a{color:#B5C1D2;border-bottom-color:transparent} .site-foot a:hover{color:var(--green);border-bottom-color:var(--green)} .foot-note{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12); font-size:.85rem;color:#6F7E93} /* Umbruchstelle der NAVIGATION: 940 px statt 760 px (5. August 2026, zuerst 900, mit dem Haus-Symbol auf 940 nachgezogen). Grund: Mit acht Menuepunkten samt Haus-Symbol passt die Zeile zwischen 761 und ~940 px nicht mehr neben Marke und Sprachschalter. Nur der Kopfbereich klappt frueher um - die Inhaltsumbrueche bleiben bei 760 px. */ @media (max-width:940px){ /* Kopfbereich darf umbrechen, die Navigation rutscht in eine zweite Zeile */ .head-in{flex-wrap:wrap;row-gap:0} /* Sichtbar ist das Kästchen nie, bedienbar aber schon: nicht display:none, sonst wäre es mit der Tastatur nicht erreichbar. */ .nav-toggle{display:block;position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none} .nav-button{ display:flex;align-items:center;justify-content:center; margin-left:auto;width:44px;height:44px;cursor:pointer; border:1px solid var(--line);border-radius:2px;background:var(--white); } .nav-bars{position:relative;display:block;width:22px;height:2px;background:var(--blue)} .nav-bars::before,.nav-bars::after{ content:"";position:absolute;left:0;display:block; width:22px;height:2px;background:var(--blue); transition:transform .15s ease,top .15s ease; } .nav-bars::before{top:-7px} .nav-bars::after{top:7px} .nav-toggle:focus-visible+.nav-button{outline:3px solid var(--green);outline-offset:3px} /* Geöffneter Zustand: aus den drei Strichen wird ein Kreuz */ .nav-toggle:checked+.nav-button{border-color:var(--blue)} .nav-toggle:checked+.nav-button .nav-bars{background:transparent} .nav-toggle:checked+.nav-button .nav-bars::before{top:0;transform:rotate(45deg)} .nav-toggle:checked+.nav-button .nav-bars::after{top:0;transform:rotate(-45deg)} .site-nav{ display:none;flex-basis:100%;flex-direction:column;gap:0;margin-left:0; align-items:stretch; /* sonst zentriert die Grundregel die Einträge waagerecht */ border-top:1px solid var(--line);padding-bottom:.5rem; } .nav-toggle:checked~.site-nav{display:flex} .site-nav a{display:flex;align-items:center;min-height:44px;padding:.5rem 0;font-size:1.05rem} .about{grid-template-columns:1fr} .portrait{max-width:240px} .step{grid-template-columns:2.8rem 1fr;gap:1rem} .trace{width:85%;opacity:.55} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .trace path{animation:none;stroke-dashoffset:0} .btn{transition:none} .nav-bars::before,.nav-bars::after{transition:none} } /* ---------- Sprachumschalter (4. August 2026) ---------- */ /* Sprachwahl als Schalter mit zwei Segmenten "DE | EN" (4. August 2026, dritte Fassung nach Rueckmeldung: die Textform wirkte wie weitere Menuepunkte und sass nicht auf der Menuelinie). Sitzt als letztes Element der .head-in - rechts neben dem Menue, auf kleinen Bildschirmen dauerhaft neben dem Menueknopf. */ .lang-wahl{display:inline-flex;align-self:center;border:1px solid var(--line); border-radius:2px;overflow:hidden;font-family:var(--display); font-size:.78rem;font-weight:700;letter-spacing:.08em;line-height:1} .lang-wahl a,.lang-aktiv{display:flex;align-items:center;padding:.42rem .6rem;border-bottom:0} .lang-wahl>*+*{border-left:1px solid var(--line)} .lang-aktiv{background:var(--navy);color:var(--white)} .lang-wahl a{color:var(--blue)} .lang-wahl a:hover{background:var(--paper);border-bottom:0} /* Seit dem 5. August 2026 (Betreiberwunsch): Oberhalb der Umbruchstelle sitzt der Schalter nicht mehr am Rand des Inhaltsrahmens, sondern mit etwas Luft am rechten BILDSCHIRMrand. Anker ist die klebende Kopfzeile (position:sticky). Die Navigation bekommt rechts Platz reserviert, damit sich beide auf schmalen Desktopbreiten nicht ueberlappen. */ @media (min-width:941px){ .lang-wahl{position:absolute;right:clamp(1rem,2.5vw,2.25rem);top:50%;transform:translateY(-50%)} .site-nav{margin-right:4.5rem} } @media (max-width:940px){ /* Reihenfolge oben: Marke | (Luft) | Sprachwahl | Menueknopf. Das Menue selbst (order 3) klappt darunter auf. Grenze 940 px seit achtem Menuepunkt und Haus-Symbol, siehe oben. */ .lang-wahl{order:1;margin-left:auto} .nav-button{order:2} .site-nav{order:3} .head-in:has(.lang-wahl) .nav-button{margin-left:1.1rem} } /* ---------- Blog (4. August 2026) ---------- */ .card-link{text-decoration:none;color:inherit} .card-link:hover{text-decoration:underline} .artikel{max-width:760px} .artikel h1{margin-bottom:1.2rem} .artikel h2{margin:2.2rem 0 .8rem;font-size:1.35rem} .artikel p{margin:0 0 1.05em;max-width:65ch} .artikel ul,.artikel ol{margin:0 0 1.05em 1.4rem;max-width:65ch} .artikel li{margin:.3rem 0} .artikel table{border-collapse:collapse;margin:1.2rem 0;font-size:.94rem;width:100%} .artikel th,.artikel td{border:1px solid var(--line);padding:.55rem .7rem;text-align:left;vertical-align:top} .artikel th{font-family:var(--display);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase} .artikel .einordnung{border-left:3px solid var(--green-dark);padding:.8rem 1.1rem; background:var(--paper);margin:1.4rem 0} .artikel img{max-width:100%;height:auto;display:block;margin:1.6rem 0; border:1px solid var(--line)} .ki-hinweis{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line); font-size:.85rem;color:var(--blue-mid)} .zurueck{margin-top:1rem} /* ---------- Hintergrundmotive Elektronik (5. August 2026) ---------- Eigene SVG-Zeichnungen als data-URI: Leiterbahnen mit Pads, Vias und einem IC-Footprint. Keine Fotos - damit keine Rechtefrage, keine zusaetzlichen Dateien, kein Ladegewicht. Bewusst blass (11 %, auf Betreiberwunsch vom 5. August 2026 von 6 % angehoben): Die Motive liegen HINTER Karten und Text und duerfen nie konkurrieren. Staerke: opacity im SVG. */ .band-alt{ background-image:url("data:image/svg+xml,"); background-size:260px 260px; } /* Messraster wie im Hero auch im Labor- und im Kontaktband - dieselbe Metapher (Messschirm), nur noch dezenter. */ .band-dark{ background-image: repeating-linear-gradient(to right,rgba(184,214,43,.09) 0 1px,transparent 1px 56px), repeating-linear-gradient(to bottom,rgba(184,214,43,.09) 0 1px,transparent 1px 56px); } .cta{ background-image: repeating-linear-gradient(to right,rgba(255,255,255,.08) 0 1px,transparent 1px 56px), repeating-linear-gradient(to bottom,rgba(255,255,255,.08) 0 1px,transparent 1px 56px); } /* ---------- Referenz-Slider (5. August 2026) ---------- Vier (und kuenftig mehr) Referenzkarten, drei gleichzeitig voll sichtbar - die wichtigsten zuerst. Reines CSS ueber Scroll-Snap, kein JavaScript: Am Telefon wird gewischt, am Rechner gescrollt oder die Leiste gezogen. Zwei Hinweise, dass es weitergeht: ein Anschnitt der naechsten Karte und die sichtbar gelassene schmale Scrollleiste. */ .cards-slider{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - 7rem)/3); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1rem; scrollbar-width:thin; scrollbar-color:var(--blue-mid) var(--line); } /* Gruene Oberkante und Papiergrund kamen zuerst am Referenz-Slider (5./6. August 2026) und sind seit dem 6. August Basisregel aller Kacheln (.card weiter oben) - hier bleibt nur das Slider-Verhalten. */ .cards-slider .card{scroll-snap-align:start} /* Referenzkarten etwas flacher (6. August 2026, Betreiberwunsch): strafferes Polster und kleinere Kartenschrift nur im Slider - die Leistungen-Kacheln behalten die .card-Grundwerte. Die Bildraender unten sind ans Slider-Polster gekoppelt (1.4rem), nicht mehr an die Grundwerte 1.8/1.7 - wer hier aendert, zieht beides nach. */ .cards-slider .card{padding:1.4rem 1.4rem 1.3rem} .cards-slider .card-img{width:calc(100% + 2.8rem);margin:-1.4rem -1.4rem 1.2rem} .cards-slider .card .tag{margin-bottom:.7rem} .cards-slider .card h3{margin-bottom:.55rem} .cards-slider .card p{font-size:.95rem} .cards-slider .card .meta{padding-top:.9rem} /* Handlungsaufforderung direkt unter den Referenzen (5. August 2026): Der Moment nach dem Beweis ist der beste Moment fuer die Frage. */ /* Hervorgehobene Kaesten (5. August 2026, Betreiberwunsch): zuerst fuer Zusatzerfahrung und NDA-Zusage unter den Referenzkacheln (.ref-mehr), am selben Abend verallgemeinert (.hervor) fuer die Hinweise und den Partner-Punkt im Leistungen-Abschnitt - auf hellen Baendern war der .limits-Absatz (weiss auf weiss bzw. papier auf papier) zu leise. Auf dem Papier-Band (.band-alt) traegt der Kasten weissen Grund. */ .ref-mehr,.hervor{margin-top:2.4rem;padding:1.5rem 1.7rem;background:var(--paper); border:1px solid var(--line);border-left:4px solid var(--green)} .band-alt .hervor{background:var(--white)} .ref-mehr p,.hervor p{margin:0} .ref-mehr p+p,.hervor p+p{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)} .hervor h3{margin:0 0 .7rem;font-size:1.15rem} /* Vierfelder-Variante des Kastens (6. August 2026, Betreiberwunsch: die vier Themenabsaetze unter den Leistungen-Kacheln wirkten als gestapelte Textwand): zwei Spalten im 2x2-Raster, die Trennlinien der Stapel-Variante entfallen; unter 720 px wieder eine Spalte. */ .hervor-raster{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem 2.2rem} .hervor-raster p+p{margin-top:0;padding-top:0;border-top:0} @media (max-width:720px){ .hervor-raster{grid-template-columns:1fr} } /* Symbole im Erfahrungs-und-NDA-Kasten: Strich-SVGs im Stil der Hero-Symbole. Erst nur das Schloss der NDA-Zeile (5. August 2026), seit dem 6. August auch das Ausrufezeichen vor der Erfahrungszeile - der Selektor deckt beide Absaetze ab. */ .ref-mehr p>svg{width:20px;height:20px;fill:none;stroke:var(--green-dark);stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px;margin-right:.5rem} .ref-cta{margin-top:2.4rem;display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap} /* Pfeiltasten: erzeugt von assets/js/slider.js - ohne JavaScript gibt es die Knoepfe nicht, der Slider bleibt per Wischen/Scrollleiste bedienbar. Dritte Fassung (5. August 2026, Betreiberwunsch): rechteckige Flaechen links und rechts NEBEN den Kacheln, so hoch wie die Kacheln selbst. Die genaue Hoehe setzt slider.js an der ersten Kachel - per CSS liesse sich die Scrollleistenhoehe des Sliders nicht sauber aussparen, sie ist je System verschieden. Am Anfang bzw. Ende blendet der nutzlose Knopf aus. Unter 640 px entfallen die Knoepfe - dort ist Wischen der natuerliche Weg, und am Rand fehlt der Platz. */ .slider-huelle{position:relative} .slider-btn{position:absolute;top:0;z-index:2; width:44px;display:flex;align-items:center;justify-content:center; font-family:var(--display);font-size:1.6rem;line-height:1;padding:0 0 .2rem; border:1px solid var(--line);border-radius:2px;background:var(--white);color:var(--blue); cursor:pointer;box-shadow:0 2px 10px rgba(15,33,61,.14); transition:background .15s ease,border-color .15s ease,opacity .15s ease} .slider-btn-zurueck{left:-22px} .slider-btn-vor{right:-22px} .slider-btn:hover:not(:disabled){background:var(--paper);border-color:var(--blue)} .slider-btn:disabled{opacity:0;pointer-events:none} /* Grenze von 1000 auf 1100 angehoben (6. August 2026): Im Band 1001-1100 px waren die drei Karten nur ~268-290 px breit - die Meta-Schlagwortzeilen brachen dort zweizeilig um (Betreiberwunsch: einzeilig). Mit zwei Karten je Ansicht sind sie ~420 px breit. */ @media (max-width:1100px){ .cards-slider{grid-auto-columns:calc((100% - 5.5rem)/2)} } @media (max-width:640px){ .cards-slider{grid-auto-columns:calc(100% - 3.5rem)} .slider-btn{display:none} } /* ---------- Bilder aus der Entwicklung (5. August 2026) ---------- Dreierstreifen Schaltung/Leiterplatte/Firmware im Leistungen-Band und das Arbeitsplatzfoto im Labor-Band. Quellen: eigene Aufnahmen aus der Firmenpraesentation (Nachweis in TODO.md, Bildtabelle). */ /* Entwurfsbilder (Schaltung/Leiterplatte/Firmware): seit dem 6. August 2026 auf der Ablauf-Seite in Schritt 02. Minimum 200 px, damit die drei Bilder in der Schrittspalte (Wrap minus Nummernspalte) noch nebeneinander stehen; auf schmalen Schirmen faellt das Raster von selbst auf zwei, dann eine Spalte. Abstand im Schritt-Massstab. */ .entwurf-bilder{display:grid;gap:1rem;margin-top:1.4rem; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))} .entwurf-bilder figure{margin:0} .entwurf-bilder img{display:block;width:100%;height:auto;border:1px solid var(--line)} .entwurf-bilder figcaption{font-family:var(--display);font-size:.78rem;letter-spacing:.14em; text-transform:uppercase;color:var(--blue-mid);margin-top:.45rem} .labor-foto{margin:2.2rem 0 0} .labor-foto img{display:block;width:100%;height:auto;border:1px solid rgba(255,255,255,.18)} .labor-foto figcaption{font-size:.85rem;color:#8C9AB0;margin-top:.55rem} /* ---------- Formelzeile im Hero (5. August 2026) ---------- Hardware + Firmware + Embedded + Entwicklung, je mit Strichsymbol (Platine, Code-Klammern, Chip, Messkurve). Zweck: Auf einen Blick erkennbar machen, was keiltronic ist - ohne einen Satz zu lesen. */ .hero-felder{display:flex;flex-wrap:wrap;align-items:center;column-gap:.9rem;row-gap:.55rem; margin:0 0 2.1rem;font-family:var(--display);font-weight:700;font-size:.88rem; letter-spacing:.14em;text-transform:uppercase;color:#C3CDDC} .hero-felder .feld{display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap} .hero-felder svg{width:21px;height:21px;flex:0 0 auto;fill:none;stroke:var(--green); stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .hero-felder .plus{color:var(--green);font-size:1.05rem;line-height:1} @media (max-width:760px){ .hero-felder{font-size:.76rem;column-gap:.6rem;letter-spacing:.1em} .hero-felder svg{width:18px;height:18px} }