/* header-footer.css – Mobile optimiert (Header + Footer)
Stand: 2025-12-18
*/
:root{
--bg: #f6f7fb;
--paper:#ffffff;
--ink:#0b1220;
--muted: rgba(15,23,42,.68);
--muted2: rgba(15,23,42,.55);
--line: rgba(15,23,42,.10);
--line2: rgba(15,23,42,.14);
--brand:#2563eb;
--brand2:#60a5fa;
--brand-rgb: 37, 99, 235;
--shadow-sm: 0 10px 24px rgba(15,23,42,.08);
--shadow: 0 22px 70px rgba(15,23,42,.12);
--shadow-hi: 0 30px 90px rgba(15,23,42,.18);
--r-sm: 14px;
--r: 18px;
--r-lg: 28px;
--max: 1180px;
--pad: clamp(18px, 4vw, 52px);
/* Header sizing helpers */
--logo: 60px;
--burger: 44px;
}
/* ===== Base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
background: radial-gradient(1200px 700px at 20% -10%, rgba(var(--brand-rgb),.12), transparent 55%),
radial-gradient(900px 600px at 90% 0%, rgba(37,99,235,.10), transparent 60%),
linear-gradient(180deg, #ffffff, var(--bg) 30%, var(--bg));
color: var(--ink);
line-height:1.55;
overflow-x:hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding: clamp(44px, 6.5vw, 90px) 0}
.section.soft{background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,0));}
.section.paper{background: rgba(255,255,255,.85); backdrop-filter: blur(10px);}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}
.sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* Tap targets */
.btn, button, .mobile a{min-height:44px}
/* iOS zoom prevention on inputs */
input, textarea, select{font-size:16px}
/* ===== Header ===== */
.topbar{
position: sticky; top: 0; z-index: 90;
background: rgba(255,255,255,.78);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--line);
transition: box-shadow .18s ease, background .18s ease;
}
.topbar.scrolled{box-shadow: var(--shadow-sm); background: rgba(255,255,255,.92)}
.nav{
display:flex;
align-items:center;
justify-content:space-between;
padding: 14px 0;
gap: 14px;
}
/* Brand */
.brand{
display:flex;
align-items:center;
gap:12px;
font-weight:950;
letter-spacing:-.02em;
min-width:0;
}
.brand .name{line-height:1.05; min-width:0}
.brand .name small{display:block;font-size:.76rem;font-weight:800;color:var(--muted)}
/* Flag element, if present in HTML: exakt auf Schrift-Höhe + sauber zentriert */
.brand .ch-flag,
.brand img.ch-flag,
.brand img.flag,
.brand .flag{
width:auto;
height: 1.06em; /* optisch gleiche Höhe wie Text */
display:inline-block;
margin-left: 8px;
border-radius: 3px;
object-fit: cover;
align-self: center; /* falls im Flex-Layout */
position: relative;
top: -0.03em; /* Baseline-Korrektur */
}
/* Logo */
.mark{display:none} /* fallback mark inaktiv – wir nutzen das echte Logo */
.logo-img{
width:var(--logo);
height:var(--logo);
object-fit: contain;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
border-radius: 0;
filter:none !important;
opacity:1 !important;
mix-blend-mode:normal !important;
}
/* Desktop menu */
.menu{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.menu a{
font-weight:900;
font-size:.92rem;
color:rgba(15,23,42,.78);
padding: 8px 10px;
border-radius: 999px;
transition: background .15s ease, color .15s ease, transform .15s ease;
}
.menu a:hover{background: rgba(var(--brand-rgb),.10); color: rgba(15,23,42,.92); transform: translateY(-1px)}
.nav-cta{display:flex;gap:10px;align-items:center}
/* Buttons */
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding: 10px 14px;
border-radius: 999px;
border:1px solid transparent;
font-weight:950;
font-size:.92rem;
cursor:pointer;
transition: transform .12s ease, box-shadow .12s ease, background .18s ease, border-color .18s ease, filter .12s ease;
white-space:nowrap;
user-select:none;
}
.btn.primary{
background: linear-gradient(135deg, var(--brand), var(--brand2));
color:#fff;
box-shadow: 0 18px 40px rgba(var(--brand-rgb),.22);
}
.btn.primary:hover{transform: translateY(-1px); filter:brightness(1.03); box-shadow: 0 22px 52px rgba(var(--brand-rgb),.30)}
.btn.secondary{
background: rgba(255,255,255,.85);
border-color: var(--line2);
color: rgba(15,23,42,.88);
box-shadow: 0 14px 32px rgba(15,23,42,.10);
}
.btn.secondary:hover{transform: translateY(-1px); background:#fff}
/* Hamburger + mobile menu */
.hamburger{display:none}
.hamburger button{
border:1px solid var(--line2);
background: rgba(255,255,255,.9);
border-radius: 12px;
width:var(--burger);
height:var(--burger);
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
box-shadow: 0 14px 30px rgba(15,23,42,.08);
}
.hamburger span{
width:18px;height:2px;background: rgba(15,23,42,.82);
display:block;position:relative;border-radius:99px;
}
.hamburger span::before,.hamburger span::after{
content:"";position:absolute;left:0;width:18px;height:2px;background: rgba(15,23,42,.82);border-radius:99px;
}
.hamburger span::before{top:-6px}
.hamburger span::after{top:6px}
.mobile{display:none; padding: 0 0 14px;}
.mobile.open{display:block}
.mobile a{
display:block;
padding: 13px 14px;
border-radius: 16px;
font-weight:950;
color: rgba(15,23,42,.86);
background: rgba(255,255,255,.75);
border:1px solid var(--line);
box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
.mobile a + a{margin-top:10px}
/* ===== Footer (Modern) ===== */
.site-footer{
margin-top: 70px;
background: #0b1220;
color: rgba(255,255,255,.78);
padding: 56px 0 22px;
border-top: 1px solid rgba(255,255,255,.08);
}
.site-footer a{ color: rgba(255,255,255,.78); text-decoration:none; }
.site-footer a:hover{ color:#fff; }
.footer-grid{
display:grid;
grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
gap: 34px;
}
.footer-brandlink{
display:flex;
align-items:center;
gap: 12px;
font-weight: 800;
color:#fff;
letter-spacing: .2px;
}
.footer-name{ font-size: 18px; line-height: 1.1; }
.footer-logo-img{
width: 38px; height: 38px; object-fit: contain;
filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
}
.footer-desc{
margin: 14px 0 18px;
max-width: 44ch;
color: rgba(255,255,255,.72);
}
.footer-col h4{
margin: 0 0 14px;
color:#fff;
font-size: 15px;
font-weight: 800;
letter-spacing: .2px;
display:inline-block;
position:relative;
padding-bottom: 10px;
}
.footer-col h4::after{
content:"";
position:absolute; left:0; bottom:0;
width: 34px; height: 2px;
background: var(--brand);
border-radius: 999px;
}
.footer-col a{
display:block;
padding: 9px 0; /* besser klickbar */
font-size: 14.5px;
color: rgba(255,255,255,.72);
}
.footer-col a:hover{ color:#fff; }
.footer-contact{ margin-top: 2px; }
.footer-contact .citem{
display:flex;
align-items:flex-start;
gap: 10px;
padding: 10px 0; /* besser klickbar */
}
.footer-contact .cico{
width: 28px; height: 28px;
border-radius: 10px;
display:grid; place-items:center;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.10);
flex: 0 0 auto;
}
.footer-contact .cico svg{ width: 16px; height: 16px; fill: rgba(255,255,255,.85); }
.footer-contact .ctxt{
font-size: 14.5px;
color: rgba(255,255,255,.74);
line-height: 1.35;
}
.footer-hint{
margin: 10px 0 0;
font-size: 12.5px;
color: rgba(255,255,255,.55);
}
.footer-bottom{
margin-top: 34px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.10);
display:flex;
align-items:center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.footer-copy{
font-size: 13.5px;
color: rgba(255,255,255,.60);
}
.footer-legal{
display:flex;
gap: 18px;
flex-wrap: wrap;
}
.footer-legal a{
font-size: 13.5px;
color: rgba(255,255,255,.70);
padding: 8px 0; /* klickbar */
}
.footer-legal a:hover{ color:#fff; }
/* ===== Reveal ===== */
.reveal{opacity:0; transform: translateY(12px); transition: opacity .55s ease, transform .55s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.reveal{opacity:1;transform:none;transition:none}
.btn{transition:none}
.btn:hover{transform:none}
}
/* ============================================================
Responsive / Mobile
============================================================ */
/* Tablet + Mobile */
@media (max-width: 980px){
/* Header: nur Brand + Hamburger, ohne CTA */
.menu{display:none !important;}
.nav-cta{display:none !important;}
.hamburger{display:block}
/* Nav: Brand nimmt die Breite links, Burger rechts */
.nav{
display:grid;
grid-template-columns: 1fr auto;
align-items:center;
gap: 12px;
padding: 12px 0;
}
/* Brand: Logo links, Text mittig, Flag rechts */
.brand{
width:100%;
min-width:0;
display:grid;
grid-template-columns: var(--logo) 1fr auto;
align-items:center;
gap: 10px;
}
.brand .name{
justify-self:center;
text-align:center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Subtitle/zweite Zeile im Header ausblenden -> sauber auf Mobile */
.brand .name small{display:none}
/* Flag: exakt Text-Höhe */
.brand .ch-flag,
.brand img.ch-flag,
.brand img.flag,
.brand .flag{
height: 1em !important;
width: auto !important;
margin-left: 0 !important;
justify-self:end;
align-self:center;
transform:none !important;
}
/* Flag im Brand-Grid rechts halten (falls es als eigenes Element im Brand liegt) */
.brand > .ch-flag,
.brand > img.ch-flag,
.brand > img.flag,
.brand > .flag{
grid-column: 3;
}
}
/* Smartphones */
@media (max-width: 560px){
:root{ --pad: 16px; --logo: 54px; }
.section{padding: 52px 0;}
/* typische Grid-Layouts auf 1 Spalte (siteweit) */
.tiles, .tl-row, .parts, .cta, .faq-grid, .footer-grid{
grid-template-columns: 1fr !important;
}
.footer-grid{gap: 20px;}
.footer-desc{max-width:none;}
.footer-legal{flex-direction: column; align-items:flex-start; gap: 10px;}
}
/* sehr kleine Geräte */
@media (max-width: 420px){
:root{ --logo: 50px; }
.brand .name{font-size: .98rem;}
}
/* =========================================================
HERO (Index) – Mobile: "Fenster" (Hero-Card) vollständig sichtbar
Wir überschreiben die Hero-Regeln aus index.php, weil dort sehr groß.
========================================================= */
@media (max-width: 720px){
/* Mehr nutzbare Höhe im Bild – Card sitzt sicher im sichtbaren Bereich */
.hero-overlay-inner{
padding-top: 18px !important; /* vorher sehr groß -> drückt Card nach unten */
align-items: flex-end !important; /* Card unten "sitzt", ohne oben abgeschnitten zu werden */
}
/* Card kompakter: weniger Padding + keine Mindesthöhe/Translate */
.hero-card{
width: 100% !important;
margin: 0 !important;
padding: 16px 16px 18px !important;
min-height: unset !important;
transform: none !important;
border-radius: 22px !important;
}
/* Chips: kleiner + sauberer Umbruch */
.hero-topline{gap:8px !important; margin-bottom:10px !important;}
.chip{padding: 7px 10px !important; font-size: .78rem !important;}
/* Typo: damit Überschrift+Text auf einen Screen passen */
.hero-title{font-size: 1.90rem !important; line-height: 1.08 !important;}
.hero-lead{font-size: .98rem !important; margin-top: 8px !important;}
/* Bildhöhe etwas entspannen (damit alles rein passt) */
.hero-media{height: min(62vh, 420px) !important;}
/* Buttons: volle Breite */
.hero-actions{flex-direction: column !important; align-items: stretch !important; gap:10px !important;}
.hero-actions .btn{width:100% !important; justify-content:center !important;}
}
@media (max-width: 520px){
/* Untere Mini-Kacheln kompakter */
.hero-under{gap:10px !important;}
.hero-mini{padding: 12px 12px 14px !important; border-radius: 20px !important;}
.hero-mini span{font-size: .90rem !important;}
}
@media (max-width: 420px){
.hero-title{font-size: 1.72rem !important;}
.hero-media{height: min(58vh, 380px) !important;}
}
/* =========================================================
HERO – Mobile Position Feintuning (v4)
Ziel: Card höher/ruhiger positioniert, Überschrift nicht "angeschnitten",
und unten noch mehr Luft zu den Kacheln.
========================================================= */
@media (max-width: 720px){
/* Overlay nicht "unten kleben" – eher mittig/oben ruhiger */
.hero-overlay-inner{
align-items: center !important;
justify-content: flex-start !important;
padding-top: 12px !important;
padding-bottom: 14px !important;
}
/* Card etwas höher + weniger wuchtig */
.hero-card{
margin-top: 10px !important;
margin-bottom: 10px !important;
padding: 14px 14px 16px !important;
}
/* Titel/Lead minimal kompakter, damit nichts abgeschnitten wirkt */
.hero-title{
font-size: 1.78rem !important;
line-height: 1.10 !important;
margin-top: 0 !important;
}
.hero-lead{
font-size: .95rem !important;
line-height: 1.35 !important;
}
/* Hero-Höhe etwas höher, damit oben+unten Luft entsteht */
.hero-media{
height: min(68vh, 460px) !important;
}
/* Abstand nach dem Hero, damit nächste Sektion nicht "anklebt" */
.hero + *{
margin-top: 14px !important;
}
}
@media (max-width: 420px){
.hero-title{font-size: 1.62rem !important;}
.hero-card{padding: 13px 13px 15px !important;}
}
/* =========================================================
Fix: sichtbare "Naht" / rote Linie am Übergang Hero -> nächste Sektion (Mobile)
Ursache ist meist ein 1px-Gap durch Rendering/Transforms oder Inline-IMG baseline.
========================================================= */
@media (max-width: 720px){
/* falls im Hero ein ![]()
genutzt wird: baseline-gap entfernen */
.hero img,
.hero-media img,
.hero-media picture,
.hero-media video{
display: block !important;
line-height: 0 !important;
}
/* 1px Seam-Cover: Hero minimal "überlappen" lassen */
.hero,
.hero-media{
margin-bottom: -1px !important;
padding-bottom: 1px !important;
}
/* bei Border/Shadow am unteren Rand: neutralisieren */
.hero,
.hero-media{
border-bottom: 0 !important;
box-shadow: none !important;
}
/* GPU-Rendering stabilisieren (gegen Hairline bei Radius/Backdrop) */
.hero-card,
.hero-media{
transform: translateZ(0) !important;
-webkit-transform: translateZ(0) !important;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
}
/* =========================================================
Mobile Spacing Polish (2025-12-21)
Ziel: konsistente Abstände (Rhythmus), weniger "Luftlöcher",
bessere Wraps bei Tabs/Buttons/Grids.
========================================================= */
/* Sticky-Header: Anker/IDs scrollen nicht unter den Header */
section[id], [id].section{ scroll-margin-top: 92px; }
@media (max-width: 720px){
/* iPhone Safe-Area: rechts/links nicht an den Rand kleben */
.container{
padding-left: calc(var(--pad) + env(safe-area-inset-left)) !important;
padding-right: calc(var(--pad) + env(safe-area-inset-right)) !important;
}
/* Allgemeiner vertikaler Rhythmus */
.section{ padding: 46px 0 !important; }
.section-head{ gap: 12px !important; margin-bottom: 14px !important; }
.kicker{ margin-bottom: 10px !important; }
.h2{ margin: 0 0 8px !important; }
.muted, .muted2{ line-height: 1.55 !important; }
/* Grids: geringere Lücken + weniger "Sprünge" */
.tiles{ gap: 12px !important; margin-top: 14px !important; }
.svc-grid{ gap: 12px !important; }
.parts{ gap: 12px !important; }
.faq-grid{ gap: 12px !important; }
/* Tabs (Leistungen): sauberer Umbruch + gleichmäßige Breite */
.tabbar{ gap: 8px !important; padding: 10px !important; }
.tab{
flex: 1 1 auto !important;
text-align: center !important;
padding: 10px 10px !important;
}
/* Marquee: etwas kompakter */
.marquee-track{ gap: 22px !important; padding: 10px 0 !important; }
/* Hero-Übergang: etwas mehr Luft nach unten */
.hero + *{ margin-top: 18px !important; }
.hero-under{ margin-top: 10px !important; }
}
/* Noch kleinere Geräte */
@media (max-width: 420px){
.section{ padding: 42px 0 !important; }
.section-head{ margin-bottom: 12px !important; }
.tab{ font-size: .90rem !important; }
}
/* =========================================================
Mobile Micro-Tuning (v2) – Hero Fenster-Position + Übergang unten
- Fenster etwas tiefer (Badge "Rückmeldung < 48h" mehr Luft oben)
- Unten mehr "Bild" sichtbar (sanfter Übergang zur nächsten Sektion)
========================================================= */
@media (max-width: 720px){
.hero-overlay-inner{
padding-top: 22px !important; /* vorher 12px */
padding-bottom: 22px !important; /* vorher 14px */
}
.hero-card{
margin-top: 14px !important; /* vorher 10px */
margin-bottom: 18px !important; /* vorher 10px -> mehr Bild unten sichtbar */
}
}
/* sehr kleine Geräte: noch etwas kompakter aber mit Luft unten */
@media (max-width: 420px){
.hero-overlay-inner{
padding-top: 20px !important;
padding-bottom: 20px !important;
}
.hero-card{
margin-top: 12px !important;
margin-bottom: 16px !important;
}
}
/* =========================================================
Mobile Micro-Tuning (v3) – sichtbar wirksam (Hero 400px Breite)
Wunsch laut Screenshot:
- Hero-Fenster etwas tiefer (mehr Luft oben, Badge nicht "an der Decke")
- unten deutlich mehr "Bild/Übergang" sichtbar
========================================================= */
@media (max-width: 720px){
/* Mehr Höhe im Hero-Bild, damit oben+unten Platz entsteht */
.hero-media{
height: min(74vh, 520px) !important; /* war min(68vh, 460px) */
}
/* Oben und unten Luft innerhalb der Overlay-Fläche */
.hero-overlay-inner{
padding-top: 30px !important; /* mehr Luft oben */
padding-bottom: 26px !important; /* mehr Bild unten sichtbar */
align-items: flex-end !important;
}
/* Badge/Chips etwas tiefer im Fenster (innen) */
.hero-card{
padding-top: 22px !important; /* war 16px */
padding-bottom: 20px !important;
}
}
@media (max-width: 420px){
.hero-media{ height: min(76vh, 520px) !important; }
.hero-overlay-inner{ padding-top: 28px !important; padding-bottom: 24px !important; }
.hero-card{ padding-top: 20px !important; }
}
/* =========================================================
Mobile Micro-Tuning (v4) – Fenster bewusst "tiefer"
Ziel: Chips/Badge nicht direkt am oberen Rand, aber unten bleibt Übergang.
========================================================= */
@media (max-width: 720px){
.hero-overlay-inner{
padding-top: 46px !important; /* v3: 30px -> deutlich tiefer */
padding-bottom: 24px !important;/* v3: 26px -> minimal zurück, damit unten Übergang bleibt */
}
.hero-card{
transform: translateY(10px) !important; /* gesamtes Fenster leicht nach unten */
}
}
@media (max-width: 420px){
.hero-overlay-inner{ padding-top: 42px !important; padding-bottom: 22px !important; }
.hero-card{ transform: translateY(8px) !important; }
}
/* =========================================================
Mobile Micro-Tuning (v5) – Fenster +5px nach unten (Feinschliff)
========================================================= */
@media (max-width: 720px){
.hero-card{ transform: translateY(15px) !important; } /* v4: 10px */
}
@media (max-width: 420px){
.hero-card{ transform: translateY(13px) !important; } /* v4: 8px */
}
/* =========================================================
Mobile Micro-Tuning (v6) – nochmals +10px nach unten
========================================================= */
@media (max-width: 720px){
.hero-card{ transform: translateY(25px) !important; } /* v5: 15px */
}
@media (max-width: 420px){
.hero-card{ transform: translateY(23px) !important; } /* v5: 13px */
}
/* =========================================================
Mobile Micro-Tuning (v7) – nochmals +5px nach unten
========================================================= */
@media (max-width: 720px){
.hero-card{ transform: translateY(30px) !important; } /* v6: 25px */
}
@media (max-width: 420px){
.hero-card{ transform: translateY(28px) !important; } /* v6: 23px */
}
/* =========================================================
Mobile Micro-Tuning (v8) – nochmals +5px nach unten (final)
========================================================= */
@media (max-width: 720px){
.hero-card{ transform: translateY(35px) !important; } /* v7: 30px */
}
@media (max-width: 420px){
.hero-card{ transform: translateY(33px) !important; } /* v7: 28px */
}
/* =========================================================
Mobile Micro-Tuning (v9) – Abstand unter Hero -10px
(rote Linien im Screenshot)
========================================================= */
@media (max-width: 720px){
.hero + *{ margin-top: 8px !important; } /* war 18px -> -10px */
}
/* =========================================================
Mobile Micro-Tuning (v10) – nochmals -10px Abstand nach Hero
========================================================= */
@media (max-width: 720px){
.hero + *{ margin-top: 0px !important; } /* v9: 8px */
.hero + .section{ padding-top: 36px !important; } /* v1 mobile: 46px -> -10px */
}
/* =========================================================
Mobile Micro-Tuning (v12) – unten Abstand nochmals -5px
(unter dem Hero zur nächsten Section)
========================================================= */
@media (max-width: 720px){
.hero + .section{ padding-top: 31px !important; } /* v10: 36px -> -5px */
}
/* =========================================================
Mobile Micro-Tuning (v13) – unten Abstand nochmals -5px
========================================================= */
@media (max-width: 720px){
.hero + .section{ padding-top: 26px !important; } /* v12: 31px -> -5px */
}
/* =========================================================
Mobile Micro-Tuning (v14) – unten Abstand nochmals -5px
========================================================= */
@media (max-width: 720px){
.hero + .section{ padding-top: 21px !important; } /* v13: 26px -> -5px */
}
/* =========================================================
Mobile Spacing (v15) – FAQ ↔ CTA (Anfrage) Abstände
Ziel laut Screenshot:
- weniger Luft zwischen FAQ und Anfrage-CTA
- weniger Luft unter der Anfrage-CTA vor dem Footer
========================================================= */
@media (max-width: 720px){
/* FAQ unten etwas kompakter */
#faq.section{ padding-bottom: 26px !important; }
/* Anfrage-Sektion oben/unten kompakter */
#kontakt.section{
padding-top: 26px !important;
padding-bottom: 26px !important;
}
}
/* =========================================================
Mobile Spacing (v16) – FAQ ↔ CTA nochmals -10px
========================================================= */
@media (max-width: 720px){
#faq.section{ padding-bottom: 16px !important; } /* v15: 26px -> -10px */
#kontakt.section{ padding-top: 16px !important; /* v15: 26px -> -10px */
padding-bottom: 16px !important; } /* v15: 26px -> -10px */
}
/* =========================================================
Mobile Spacing (v17) – Abstand unter Anfrage-CTA vor Footer -15px
========================================================= */
@media (max-width: 720px){
#kontakt.section{ padding-bottom: 1px !important; } /* v16: 16px -> -15px */
}
/* =========================================================
Mobile Spacing (v18) – nochmals -20px unter Anfrage-CTA
Hinweis: Padding kann nicht negativ sein -> wir ziehen die Sektion
leicht nach unten/oben zusammen via margin-bottom.
========================================================= */
@media (max-width: 720px){
#kontakt.section{
padding-bottom: 0px !important;
margin-bottom: -20px !important; /* nochmals -20px */
}
}
/* =========================================================
Mobile Spacing (v19) – nochmals -5px unter Anfrage-CTA
========================================================= */
@media (max-width: 720px){
#kontakt.section{ margin-bottom: -25px !important; } /* v18: -20px */
}
/* =========================================================
Mobile Spacing (v20) – nochmals -5px unter Anfrage-CTA
========================================================= */
@media (max-width: 720px){
#kontakt.section{ margin-bottom: -30px !important; } /* v19: -25px */
}
/* =========================================================
Header Micro-Tuning (v21) – Swiss Flag nach rechts + etwas nach oben
========================================================= */
@media (max-width: 720px){
.brand .ch-flag,
.brand img.ch-flag,
.brand img.flag,
.brand .flag{
margin-left: 12px !important; /* etwas mehr Abstand -> wirkt "weiter rechts" */
position: relative !important;
top: -2px !important; /* minimal nach oben */
}
}
/* =========================================================
Header Micro-Tuning (v22) – Swiss Flag 1px nach unten
========================================================= */
@media (max-width: 720px){
.brand .ch-flag,
.brand img.ch-flag,
.brand img.flag,
.brand .flag{
top: -1px !important; /* v21: -2px -> 1px nach unten */
}
}
/* =========================================================
Header Micro-Tuning (v23) – Swiss Flag 3px näher an die Schrift
========================================================= */
@media (max-width: 720px){
.brand .ch-flag,
.brand img.ch-flag,
.brand img.flag,
.brand .flag{
margin-left: 9px !important; /* v21/v22: 12px -> 3px näher */
}
}
/* =========================================================
Header Consistency (v24) – gleiche Header-Breite auf ALLEN Seiten
Problem: manche Seiten haben .nav ohne .container / andere CSS-Reihenfolge.
Lösung: .topbar .nav bekommt immer denselben "Container"-Look.
========================================================= */
.topbar{left:0; right:0; width:100%;}
.topbar .nav{
max-width: var(--max) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: var(--pad) !important;
padding-right: var(--pad) !important;
box-sizing: border-box !important;
}
/* Safe-area auf Mobile */
@media (max-width: 720px){
.topbar .nav{
padding-left: calc(var(--pad) + env(safe-area-inset-left)) !important;
padding-right: calc(var(--pad) + env(safe-area-inset-right)) !important;
}
}
/* =========================================================
Header Consistency (v25) – Header aus schmalen Wrappern "rausbrechen"
Wenn eine Seite den Header in einem zentrierten Container rendert,
bleibt er sonst schmal. Diese Regeln machen den Header immer viewport-breit.
========================================================= */
.topbar{
width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
box-sizing: border-box !important;
}
/* falls irgendwo max-width auf .topbar liegt */
.topbar{ max-width: none !important; }
/* nav innen weiterhin schön zentriert wie Container */
.topbar .nav{
width: 100% !important;
max-width: var(--max) !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
/* =========================================================
Header Consistency (v27) – Startseite vs. Unterseiten (Logo-Größe)
Ursache: index.php hat eine spezifische Regel `.topbar .logo-img{width:60px}`
die wegen höherer Spezifität die responsive --logo Werte (54/50px) überstimmt.
Fix: wir erzwingen überall `var(--logo)` mit !important.
========================================================= */
.topbar .logo-img,
.topbar .mark{
width: var(--logo) !important;
height: var(--logo) !important;
}
/* falls das Logo als ![]()
in einem Link steckt */
.topbar a .logo-img{
width: var(--logo) !important;
height: var(--logo) !important;
}
/* =========================================================
Header Hard-Fix (v28) – schützt den Site-Header vor globalen `header { ... }` Regeln
Problem: mehrere Seiten haben in ihrem Inline-CSS globale Styles wie `header { display:flex; margin-bottom:... }`
Dadurch wird auch unser Site-Header (falls als