/* Klima Loewe – Website v5 (aufgeräumt, Kacheln, responsive) */
:root{
  --bg:#f6f8fb;
  --surface:#ffffff;
  --surface2:#f0f4fa;
  --text:#0b1220;
  --muted:#5a667a;
  --line:#e6edf6;
  --accent:#1f6fb2;
  --shadow: 0 12px 28px rgba(11,18,32,.08);
  --radius:18px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  /* Belebter Hintergrund: sanfte Farbverläufe für mehr Dynamik */
  background:
    radial-gradient(80vw 60vh at 20% 0%, rgba(255,106,61,.08), transparent 70%),
    radial-gradient(80vw 60vh at 80% 20%, rgba(31,111,178,.08), transparent 70%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
}

a{color:inherit}
.container{max-width:var(--max);margin:0 auto;padding:0 18px}
.muted{color:var(--muted)}
.small{font-size:.92rem}
h1,h2,h3{line-height:1.15}
h1{font-size:clamp(2.0rem, 4vw, 3.1rem);margin:0 0 10px;letter-spacing:-.5px}
h2{font-size:clamp(1.3rem, 2.2vw, 1.6rem);margin:0}
h3{font-size:1.05rem;margin:0 0 8px}
p{margin:0 0 12px}

.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 12px;border-radius:12px;box-shadow:var(--shadow);z-index:9999}

/* Header */
.header{
  position:sticky;top:0;z-index:1000;
  backdrop-filter: blur(10px);
  background:rgba(246,248,251,.85);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;align-items:center;gap:14px;
  padding:12px 0;
}
.brand{
  display:flex;align-items:center;gap:12px;
  text-decoration:none;
}
.brand__logo{
  width:84px;height:84px;            /* more prominent */
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
  padding:6px;
  box-shadow: 0 10px 22px rgba(11,18,32,.08);
}
.brand__text{display:flex;flex-direction:column;gap:1px}
.brand__name{font-weight:900;letter-spacing:.2px;font-size:1.15rem}
.brand__sub{font-size:.86rem;color:var(--muted)}

.nav{
  margin-left:auto;
  display:flex;align-items:center;gap:16px;
}
.nav a{
  text-decoration:none;
  font-weight:700;
  color:rgba(11,18,32,.86);
  /* Verhindere Zeilenumbruch bei mehrteiligen Navigationsbegriffen wie „Über uns“ */
  white-space: nowrap;
}
.nav a:hover{color:var(--accent)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:999px;
  background:var(--accent);color:#fff;border:1px solid rgba(31,111,178,.35);
  text-decoration:none;font-weight:800;
}
.btn--ghost{background:transparent;color:var(--accent)}
.btn--small{padding:9px 12px;font-size:.95rem}

.nav-toggle{
  display:none;
  border:1px solid var(--line);
  background:#fff;border-radius:12px;
  padding:10px;
}
.nav-toggle__bar{display:block;width:20px;height:2px;background:var(--text);margin:4px 0;border-radius:2px}

/* Hero */
.hero{
  padding:46px 0 26px;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(31,111,178,.14), transparent 62%),
    radial-gradient(900px 420px at 85% 10%, rgba(31,111,178,.06), transparent 62%);
}
.badge{
  display:inline-flex;gap:8px;align-items:center;
  background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 12px;
  font-weight:900;font-size:.86rem;color:var(--muted);
  box-shadow:0 10px 22px rgba(11,18,32,.06);
}
.lead{max-width:70ch;font-size:1.08rem;color:rgba(11,18,32,.82)}
.hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}

/* Sections */
.section{padding:34px 0}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.link{color:var(--accent);font-weight:800;text-decoration:none}
.link:hover{text-decoration:underline}

/* Tiles */
.tiles{
  display:grid;gap:14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tiles--2{grid-template-columns: repeat(2, minmax(0, 1fr))}
.tile, .tile-link{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:0 14px 28px rgba(11,18,32,.06);
}
.tile-link{display:block;text-decoration:none;position:relative}
.tile-link:hover{transform:translateY(-1px);box-shadow:0 18px 36px rgba(11,18,32,.10)}
.kicker{font-weight:900;color:var(--accent);font-size:.85rem;margin-bottom:8px}

/* Callout */
.callout{
  margin-top:16px;
  background:linear-gradient(120deg, rgba(31,111,178,.12), rgba(31,111,178,.06));
  border:1px solid rgba(31,111,178,.22);
  border-radius:var(--radius);
  padding:16px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}

/* Lists */
.list{margin:8px 0 0;padding-left:18px;color:rgba(11,18,32,.82)}
.list li{margin:6px 0}

/* Forms */
.form{
  background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
label{font-weight:900}
input,textarea,select{
  font:inherit;
  padding:12px;border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
}
textarea{min-height:140px;resize:vertical}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* Footer */
.footer{border-top:1px solid var(--line);background:#fff;padding:20px 0;margin-top:10px}
.footer__inner{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.footer a{color:var(--muted);text-decoration:none;font-weight:900}
.footer a:hover{color:var(--accent)}

/* Responsive */
@media (max-width: 980px){
  .tiles{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .tiles--2{grid-template-columns: 1fr}
}
@media (max-width: 760px){
  .nav-toggle{display:inline-block;margin-left:auto}
  .nav{
    display:none;
    /* Vollflächiges Mobile-Menü: alle Links sichtbar und klickbar */
    position:fixed;
    left:0;right:0;
    top:70px;
    bottom:0;
    z-index:999;
    background:#fff;
    border-top:1px solid var(--line);
    padding:14px 16px;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav.is-open{display:flex}
  /* Links/Buttons im Mobile-Menü über volle Breite, damit nichts abgeschnitten wird */
  .nav.is-open a,
  .nav.is-open .btn{display:block;width:100%}
  .btn{width:100%;justify-content:center}
  .header__inner{position:relative}
  .form__row{grid-template-columns:1fr}

  /* Zusätzliche Optimierung für das Mobile-Menü:
     Stelle sicher, dass alle Navigationseinträge untereinander aufgelistet werden
     und gut lesbar sind, indem wir sie linksbündig ausrichten und ausreichend
     Innenabstand definieren. Diese Regeln verbessern die Sichtbarkeit der Menüpunkte
     auf kleinen Geräten und verhindern, dass Texte abgeschnitten werden. */
  .nav.is-open a{
    text-align:left;
    padding:10px 12px;
    /* Im Mobilmenü darf der Link umbrechen, daher normaler Zeilenumbruch */
    white-space: normal;
  }

  /* Verhindere, dass Text in Buttons innerhalb des Mobile-Menüs abgeschnitten wird. */
  .nav.is-open .btn{
    text-align:center;
  }
}

/* Scroll sperren, wenn Mobile-Menü offen ist */
body.nav-open{overflow:hidden}

/*
 * Verbesserte Darstellung des mobilen Menüs (max-width: 760px).
 * Das Overlay füllt nun den gesamten Bildschirm aus und hat einen ausreichenden
 * Innenabstand nach unten, sodass die Navigation beim Öffnen auf dem Handy
 * sauber sichtbar bleibt. Die Elemente werden weiterhin vertikal gestapelt.
 */
@media (max-width: 760px){
  /* Standardmäßig bleibt die Navigation verborgen */
  .nav{display:none;}
  /* Wenn die Navigation geöffnet wird, füllt sie den gesamten Bildschirm und
     ermöglicht ein bequemes Scrollen durch die Menüpunkte. */
  .nav.is-open{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding:80px 20px 20px; /* oben genug Platz lassen für den Header */
    background:#fff;
    overflow-y:auto;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    z-index:1000;
    margin-left:0 !important;
  }
}

/* Alternative mobile Navigation: statt Overlay wird das Menü unterhalb des Headers aufgeklappt.
   Dies sorgt für bessere Sichtbarkeit, wenn der Overlay-Modus Probleme bereitet. */
@media (max-width: 760px){
  .nav{display:none;}
  .nav.is-open{
    display:block;
    position:static;
    width:100%;
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:14px 16px;
    /* Entferne das automatische linken Margin, damit das Menü nicht von rechts hineinragt */
    margin-left:0 !important;
  }
  .nav.is-open a,
  .nav.is-open .btn{
    display:block;
    width:100%;
    margin-bottom:8px;
    text-align:left;
    padding:10px 12px;
    white-space:normal;
  }
  /* Buttons im mobilen Menü mittig ausrichten */
  .nav.is-open .btn{justify-content:center;}
}

/*
 * Ganzseitige Darstellung des mobilen Menüs.
 * Wenn der Menü-Button gedrückt wird (body.nav-open), soll die Navigation
 * über die komplette Bildschirmbreite liegen. Dadurch wird sichergestellt,
 * dass die Menüpunkte mittig über der Seite angezeigt werden und nicht
 * nur am rechten Rand erscheinen. Diese Regel überschreibt ältere
 * Layoutdefinitionen für mobile Menüs.
 */
@media (max-width: 760px){
  body.nav-open .nav{
    display:flex !important;
    position:fixed !important;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#fff;
    overflow-y:auto;
    z-index:1000;
    flex-direction:column;
    align-items:flex-start;
    padding:80px 24px 24px;
    margin-left:0 !important;
    margin-right:0 !important;
    max-width:none;
    width:100%;
  }
  body.nav-open .nav a,
  body.nav-open .nav .btn{
    display:block;
    width:100%;
    margin-bottom:8px;
    text-align:left;
    padding:12px 16px;
    white-space:normal;
  }
  body.nav-open .nav .btn{justify-content:center;}
}


/* Professional polish */
:root{
  --shadow-sm: 0 8px 20px rgba(11,18,32,.08);
  --shadow-lg: 0 18px 40px rgba(11,18,32,.12);
}

html{scroll-behavior:smooth}
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid rgba(31,111,178,.35);
  outline-offset:2px;
  border-radius:10px;
}

.header{
  backdrop-filter:saturate(180%) blur(10px);
  background: rgba(246,248,251,.92);
  border-bottom:1px solid var(--line);
}

.nav a{
  padding:10px 12px;
  border-radius:12px;
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.nav a:hover{
  background: rgba(31,111,178,.08);
  transform: translateY(-1px);
}
.nav .btn{padding:10px 14px}

.social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;height:42px;
  border-radius:14px;
  color: rgba(11,18,32,.86);
  background: rgba(11,18,32,.04);
  border:1px solid rgba(11,18,32,.06);
  transition: background .15s ease, transform .15s ease, color .15s ease;
  /* The social buttons show a subtle gray background; icons are inserted via <img> in the HTML.
     We no longer embed the Instagram logo via a background image here. */
  /* background-image has been removed; images are handled in the markup instead */
  /* background-repeat, background-position and background-size removed */
}
.social:hover{background: rgba(31,111,178,.10); color: var(--accent); transform: translateY(-1px);}
.social .icon{display:block}
.social--text{width:auto; padding:10px 12px; gap:8px}
.social--text span{font-weight:700}

/* Style for social icons loaded as <img> elements */
.social img{
  width:20px;
  height:20px;
  display:block;
}

.hero{
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(31,111,178,.16), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, rgba(31,111,178,.10), transparent 60%),
    linear-gradient(180deg, #ffffff, rgba(246,248,251,.7));
  border-bottom:1px solid var(--line);
}
.hero .badge{
  background: rgba(31,111,178,.10);
  border:1px solid rgba(31,111,178,.18);
}

.tile{
  border:1px solid var(--line);
  box-shadow: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tile:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(31,111,178,.20);
}

.footer{
  border-top:1px solid var(--line);
  background: linear-gradient(180deg, rgba(246,248,251,.7), rgba(246,248,251,1));
}


/* v11 – markanter Look + Wasserzeichen-Logo */
:root{
  --accent:#1f6fb2;
  --accent2:#ff6a3d;
  --dark:#0b1220;
  --shadow-sm: 0 10px 26px rgba(11,18,32,.10);
  --shadow-lg: 0 22px 60px rgba(11,18,32,.16);
}

body{position:relative;}
body::before{
  content:"";
  position:fixed;
  inset:0;
  background-image:url('logo.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:min(520px, 60vw);
  /* farbiges Wasserzeichen jetzt etwas intensiver sichtbar */
  opacity:0.15;
  pointer-events:none;
  z-index:0;
  /* Farbfilter entfernt, damit das Logo farbig erscheint */
  filter:none;
}
.header, main, footer{position:relative; z-index:1;}

/* Header: Name groß, Logo rechts */
.brand__logo{display:none}
.brand__name{font-size:1.45rem;font-weight:950;letter-spacing:.3px}
.brand__sub{font-size:.92rem}
.logo-right{
  width:74px;height:74px;
  object-fit:contain;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  padding:8px;
  box-shadow: var(--shadow-sm);
  flex:0 0 auto;
}

/* Buttons: markanter */
.nav .btn, .btn{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border:0;
  box-shadow: 0 12px 24px rgba(31,111,178,.22);
}
.btn--ghost{
  background:transparent;
  border:1px solid rgba(31,111,178,.35);
  color:var(--accent);
  box-shadow:none;
}

/* Hero: stärker */
.hero{
  padding:56px 0 34px;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(255,106,61,.22), transparent 58%),
    radial-gradient(900px 420px at 88% 0%, rgba(31,111,178,.22), transparent 58%),
    linear-gradient(180deg, #ffffff, rgba(246,248,251,.55));
  border-bottom:1px solid var(--line);
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:start;
}
.hero-card{
  background: rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow-sm);
}
.hero-card h3{margin:0 0 8px}
.hero-points{margin:0;padding-left:18px;color:rgba(11,18,32,.82)}
.hero-points li{margin:6px 0}
.badge{
  background: rgba(11,18,32,.04);
  border:1px solid rgba(11,18,32,.06);
  color: rgba(11,18,32,.72);
}
.lead{font-size:1.12rem}

/* Tiles: mehr Kontrast */
.tile, .tile-link{border:1px solid rgba(11,18,32,.08)}
.tile:hover, .tile-link:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(31,111,178,.22);
}
.kicker{color:var(--accent2)}

/* Section headline underline */
.section__head h2{position:relative}
.section__head h2::after{
  content:"";
  display:block;
  width:64px;
  height:4px;
  margin-top:10px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr}
  .logo-right{width:66px;height:66px}
}
@media (max-width: 760px){
  body::before{background-size:min(420px, 72vw); opacity:0.05}
  .brand__name{font-size:1.35rem}
  .logo-right{width:62px;height:62px}
}


/* v12 – Header Brand (Logo rechts neben Schriftzug) + Maps + Aktuelles */
.brand{gap:14px;}
.brand__logo{
  display:block !important;
  width:66px;height:66px;
  object-fit:contain;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  padding:8px;
  box-shadow: var(--shadow-sm);
}
.brand__text{display:flex;flex-direction:column;gap:2px;}
.brand__name{font-size:1.65rem;font-weight:980;letter-spacing:.35px;}
.brand__sub{font-size:.98rem;color:rgba(11,18,32,.68);}

.header__inner{padding:14px 0;}
.brand__wrap{
  display:flex;
  align-items:center;
  gap:14px;
  padding:10px 12px;
  border-radius:18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(11,18,32,.06);
  box-shadow: var(--shadow-sm);
}

/* Map embed */
.map-embed{
  width:100%;
  aspect-ratio: 16 / 9;
  border:0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.map-note{margin-top:10px;color:var(--muted);font-size:.92rem;}

/* Aktuelles list */
.news-list{display:grid;gap:14px;grid-template-columns: repeat(3, minmax(0,1fr));}
.news-item{
  background:#fff;
  border:1px solid rgba(11,18,32,.08);
  border-radius: var(--radius);
  padding:16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.news-item:hover{transform: translateY(-4px);box-shadow: var(--shadow-sm);border-color: rgba(31,111,178,.22);}
.news-date{font-weight:900;color: var(--accent2);font-size:.85rem;margin-bottom:6px;}

@media (max-width: 980px){
  .brand__name{font-size:1.5rem}
  .brand__logo{width:60px;height:60px}
  .news-list{grid-template-columns:1fr}
}
@media (max-width: 760px){
  .brand__wrap{padding:8px 10px}
  .brand__logo{width:56px;height:56px}
  .brand__name{font-size:1.42rem}
}


/* v13 – mehr Logo-Präsenz (Favicon/TouchIcon + Footer-Logo + Headline-Icon) */
.section__head h2{
  display:flex;
  align-items:center;
  gap:10px;
}
.section__head h2::before{
  content:"";
  width:26px;
  height:26px;
  background-image: url("logo.jpg");
  background-size: contain;
  background-repeat:no-repeat;
  background-position:center;
  border-radius:8px;
  box-shadow: var(--shadow-sm);
  border:1px solid rgba(11,18,32,.06);
}

/* Footer Logo */
.footer__brand{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.footer__brand img{
  width:42px;
  height:42px;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  border:1px solid rgba(11,18,32,.08);
  padding:6px;
  box-shadow: var(--shadow-sm);
}
@media (max-width: 760px){
  .section__head h2::before{width:22px;height:22px}
  .footer__brand img{width:36px;height:36px}
}

/* v14 – Verbesserte Startseite mit prominenterem Logo und modernem Hero-Layout */
/* Header: vergrößertes Logo für eine stärkere Markenpräsenz */
.brand__logo{
  width:74px;
  height:74px;
}

/* Hero Graphic: platzieren Sie das Logo in einem farbigen Ring und darunter den Überblick */
.hero-graphic{
  display:flex;
  flex-direction:column;
  /* Align graphic items to the start so the card sits nicely below the logo */
  align-items:flex-start;
  gap:24px;
}

/* Der äußere Ring mit Farbverlauf erzeugt eine moderne, coole Wirkung */
.hero-logo-wrap{
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  padding:6px;
  border-radius:50%;
  box-shadow: var(--shadow-lg);
}

/* Die eigentliche Logo-Fläche: weißer Kreis mit ausreichend Innenabstand */
/* Logo ohne äußeren Ring: weißer Kreis mit leichtem Rand und Schatten */
/* Logo ohne äußeren Ring: weißer Kreis mit größerem Durchmesser und dezentem Rand */
/* Logo ohne äußeren Ring: weißer Kreis mit noch größerem Durchmesser */
.hero-logo{
  background:#ffffff;
  border-radius:50%;
  padding:36px;
  width:300px;
  height:300px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow:hidden;
  /* clip-path stellt einen echten Kreis sicher und entfernt kleine Ecken */
  clip-path: circle(50%);
}

/* Logo-Anpassungen: Bild skaliert proportional innerhalb des Kreises */
.hero-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
}

@media (max-width: 980px){
  /* Anpassungen für mittlere Bildschirme */
  .hero-logo{
    width:250px;
    height:250px;
    padding:30px;
  }
}

@media (max-width: 760px){
  /* Anpassungen für kleine Bildschirme – Logo etwas kleiner und Abstand nach oben */
  .hero-logo{
    width:220px;
    height:220px;
    padding:24px;
  }
  .hero-graphic{
    margin-top:28px;
  }
}

/* Gradient text effect for hero headline: emphasizes the company name with a modern flair */
.hero h1{
  font-weight:980;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
}

/* WhatsApp Button: grüner Farbverlauf analog zum Markenstil */
.btn--whatsapp{
  background: linear-gradient(135deg, #25D366, #128C7E);
  color:#fff;
  border:0;
  box-shadow: 0 12px 24px rgba(18, 140, 126, .25);
}
.btn--whatsapp:hover{
  background: linear-gradient(135deg, #128C7E, #075E54);
  color:#fff;
  transform: translateY(-2px);
}

/* Spezifischere Regeln für WhatsApp-Buttons in der Navigation, damit sie andere Button-Styles überschreiben */
.btn.btn--whatsapp,
.nav .btn--whatsapp{
  background: linear-gradient(135deg, #25D366, #128C7E) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow: 0 12px 24px rgba(18, 140, 126, .25) !important;
}
.btn.btn--whatsapp:hover,
.nav .btn--whatsapp:hover{
  background: linear-gradient(135deg, #128C7E, #075E54) !important;
  color:#fff !important;
}

/* Size and spacing for WhatsApp buttons that include an inline SVG icon */
.btn--whatsapp svg {
  width: 1em;
  height: 1em;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}


/* Sticky Kontaktleiste (nur Mobile) */
.sticky-cta{
  position:fixed;
  left:12px; right:12px; bottom:12px;
  display:none;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  z-index:1200;
}
.sticky-cta__item{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 12px;
  border-radius:999px;
  text-decoration:none;
  font-weight:900;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 16px 34px rgba(11,18,32,.14);
}
.sticky-cta__item:hover{transform:translateY(-1px)}
.sticky-cta__item--wa{background:linear-gradient(120deg, rgba(37,211,102,.18), rgba(31,111,178,.06)); border-color:rgba(37,211,102,.28)}
.sticky-cta__icon{font-size:1.05rem}
@media (max-width: 760px){
  .sticky-cta{display:grid}
  body{padding-bottom:86px} /* Platz für Sticky Bar */
}


/* Vertikaler Stack */
.stack{display:grid;gap:14px}

/* Anpassung: Firmenname nicht mehr untereinander, sondern nebeneinander.
   Die einzelnen Teile des Namens werden als horizontale Flexzeile dargestellt.
   Wir erzwingen per !important, dass die Richtung und das Wrapping nicht von
   vorherigen Regeln überschrieben werden. Durch `align-items:baseline` wirken
   die unterschiedlichen Schriftgrößen harmonisch nebeneinander. */
/* Revert: Firmenname wieder untereinander anordnen.
   Der Name (Klima Loewe) und der Untertitel (Heiz- & Klimatechnik) sollen wieder
   vertikal gestapelt werden. Wir setzen die Flex-Richtung daher zurück auf
   „column“ und heben das erzwungene No-Wrap auf. */
.brand__text{
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-items: flex-start !important;
}

/* Zeilenumbruch wieder erlauben, damit die Unterzeile unter dem Namen steht. */
/* Der Markenname „Klima Loewe“ sollte nicht umbrechen, daher nur
   für den Namen nowrap setzen. Die Unterzeile darf umbrechen falls nötig. */
.brand__name{
  white-space: nowrap !important;
  margin-right: 0 !important;
}
.brand__sub{
  white-space: normal !important;
}

/* Promo Banner – Winteraktion (Startseite + Aktuelles) */
.promo-section{padding-top:20px;padding-bottom:0}
.promo-banner{
  display:block;
  position:relative;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(11,18,32,.08);
  box-shadow: var(--shadow-sm);
  background:#fff;
  text-decoration:none;
  transform: translateZ(0);
}
.promo-banner img{
  width:100%;
  height:auto;
  display:block;
}
.promo-banner__cta{
  position:absolute;
  right:16px;
  bottom:16px;
  padding:10px 14px;
  border-radius:999px;
  font-weight:850;
  letter-spacing:.2px;
  color:#fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 12px 26px rgba(11,18,32,.18);
}
.promo-banner:hover{transform: translateY(-2px); box-shadow: var(--shadow-lg)}
.promo-banner:focus-visible{outline:3px solid rgba(31,111,178,.35); outline-offset:4px}

.promo-banner--compact{margin-top:14px;margin-bottom:16px}
.promo-banner--compact .promo-banner__cta{right:12px;bottom:12px;padding:9px 12px;font-size:.95rem}

@media (max-width: 760px){
  .promo-banner{border-radius:18px}
  .promo-banner__cta{right:10px;bottom:10px;padding:8px 10px;font-size:.92rem}
}