/* Neues Design (Relaunch 04.10.2026) für die älteren Seiten:
   Branchen, KI-Agentur, Impressum, Datenschutz, Ratgeber.
   Wird NACH dem seiteneigenen <style> geladen und überschreibt dessen Kopfzeile,
   Footer, Hero und Grundfarben. Kopfzeile + Footer sind 1:1 die der neuen Seiten
   (index, webdesign-winterthur, ueber-uns), nur unter .topbar / footer.ft
   eingegrenzt, damit sie nicht mit den alten Klassen (.logo, .btn, footer a) kollidieren. */

:root{--blue:#1D4E89;--blue-dk:#143A66;--gold:#E6A23C;--gold-dk:#B97E1E;--gold-lt:#FBEBCF;--ink:#172033;--muted:#56617A;--fh:'Poppins',system-ui,sans-serif;--fb:'Atkinson Hyperlegible',system-ui,sans-serif;--paper:#FBF8F1;--tint:#fff;--line:#DCE3EE;--blue-lt:#E3EDF8;--night:#0F172A;--ease:cubic-bezier(.2,.7,.2,1)}
body{background:var(--paper);font-size:18px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.bg-tint{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Kopfzeile */
.topbar{position:sticky;top:0;z-index:60;background:rgba(251,248,241,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s,background .3s}
.topbar.scrolled{background:rgba(255,255,255,.94);border-color:#DCE3EE;box-shadow:0 12px 30px -26px rgba(23,32,51,.6)}
.topbar .wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.topbar .nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px 0;transition:padding .3s}
.topbar.scrolled .nav{padding:8px 0}
.topbar .logo{display:flex;align-items:center;gap:10px;font:700 21px 'Poppins',sans-serif;letter-spacing:-.02em;text-decoration:none;color:var(--ink)}
.topbar .logo img{height:30px;width:auto;display:block}.topbar .logo b{color:var(--gold)}
.topbar .nav ul{display:flex;gap:26px;list-style:none;font-size:16px;margin:0;padding:0}
.topbar .nav ul a{text-decoration:none;opacity:.85;color:var(--ink)}.topbar .nav ul a:hover{opacity:1}
.topbar .nav ul a[aria-current="page"]{color:#1D4E89;font-weight:700;opacity:1}
.topbar .nav .tag{font-size:11px;background:var(--gold);color:var(--night);padding:2px 7px;border-radius:999px;margin-left:5px;font-weight:700;vertical-align:2px}
.topbar .nav .show-sm{display:none}
.topbar .btn{display:inline-flex;align-items:center;gap:10px;font:600 16px 'Poppins',sans-serif;padding:15px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:transform .2s var(--ease),background .2s;cursor:pointer;min-height:48px}
.topbar .btn:hover{transform:translateY(-2px)}
.topbar .btn-gold,.topbar .btn-gold:hover{background:var(--gold);color:var(--night);box-shadow:0 10px 30px -10px rgba(230,162,60,.7)}
@media(max-width:900px){.topbar .nav ul{display:none}}
@media(max-width:560px){.topbar .nav .hide-sm{display:none}.topbar .nav .show-sm{display:inline}.topbar .nav{gap:12px}.topbar .nav .btn{padding:11px 18px;font-size:15px;white-space:nowrap}.topbar .logo{white-space:nowrap;font-size:18px;gap:7px}.topbar .logo img{height:22px}}

/* Heller Seitenkopf statt dunklem Navy (wie Hero der neuen Seiten) */
.phero{background:radial-gradient(700px 420px at 85% 20%,rgba(230,162,60,.16),transparent 70%),radial-gradient(700px 500px at 5% 95%,rgba(29,78,137,.08),transparent 70%),var(--paper);color:var(--ink);padding:56px 0 72px}
.phero::after{display:none}
.crumb{color:var(--muted);font-size:14px}
.crumb a{color:var(--blue)}
.crumb a:hover{color:var(--blue-dk)}
.phero .ey{background:none;border:0;padding:0;font:600 13px 'Poppins',sans-serif;letter-spacing:.14em;color:var(--gold-dk)}
.phero h1{color:var(--ink);font-size:clamp(34px,4.8vw,58px);letter-spacing:-.035em;line-height:1.06;max-width:18ch}
.phero h1 em{background:none;-webkit-text-fill-color:currentColor;color:var(--blue)}
.phero .lead{color:#3B4659;font-size:20px;line-height:1.6;max-width:60ch}
.btn-line{background:transparent;border:2px solid var(--blue);color:var(--blue)}
.btn-line:hover{background:var(--blue);color:#fff}
.fcta p{color:#C9D3E2}

/* Footer */
footer.ft{background:#0F1E36;color:#C9D3E2;font-size:16px;padding:0;margin:0}
footer.ft a{display:inline;padding:0;font-size:inherit;color:#fff;text-decoration:none}
footer.ft a:hover{color:#F1B34F}
footer.ft p{color:#C9D3E2;font-size:16px;max-width:300px;margin:16px 0 0;line-height:1.6}
footer.ft .wrap{max-width:1160px;margin:0 auto;padding-left:24px;padding-right:24px}
.ft-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:44px;padding-top:70px;padding-bottom:56px}
footer.ft .ft-logo{display:inline-flex;align-items:center;gap:10px;font:700 22px 'Poppins',sans-serif;color:#fff}
.ft-logo img{height:30px;width:auto}
.ft-logo b{color:#E6A23C}
.ft-social{display:flex;gap:10px;margin-top:20px}
footer.ft .ft-social a{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);transition:background .25s,transform .25s}
footer.ft .ft-social a:hover{background:#E6A23C;transform:translateY(-2px)}
.ft-social svg{width:19px;height:19px;fill:currentColor}
footer.ft h3{font:700 17px 'Poppins',sans-serif;color:#fff;margin:0 0 16px;letter-spacing:0;text-transform:none}
footer.ft ul{list-style:none;display:grid;gap:10px;padding:0;margin:0}
.ft-contact li{display:flex;gap:12px;align-items:flex-start}
.ft-contact svg{flex:none;width:18px;height:18px;margin-top:3px;stroke:#E6A23C;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
footer.ft .ft-cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;min-height:48px;padding:12px 22px;border-radius:999px;background:#E6A23C;color:#0F172A!important;font:600 15px 'Poppins',sans-serif}
footer.ft .ft-cta:hover{background:#F1B34F}
.ft-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;font-size:14px}
footer.ft .ft-bottom .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.ft-legal{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:center}
.ft-legal button{background:none;border:0;color:#fff;font:inherit;cursor:pointer;padding:0;min-height:44px}
.ft-legal button:hover{color:#F1B34F}
@media(max-width:900px){.ft-grid{grid-template-columns:1fr 1fr;gap:36px}}
@media(max-width:560px){.ft-grid{grid-template-columns:1fr;padding-top:52px}footer.ft .ft-bottom .wrap{flex-direction:column;align-items:flex-start}}
.crumb strong{color:var(--ink)}
.topbar .nav li,footer.ft li{margin:0;padding:0;font-size:inherit}
footer.ft li{color:#C9D3E2}
/* Schmale Handys (320–400 px): lange Wörter trennen, Raster nicht aufsprengen */
.phero h1,.sec-head h2,.cards h3,main.wrap h2{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.cards>*{min-width:0}
@media(max-width:400px){.phero h1{font-size:30px}.cards{grid-template-columns:1fr}}
@media(max-width:400px){main p,main li,main h1,main h2,main a,main span{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}}
main [style*="display:grid"]>*{min-width:0}