/*
 Theme Name: Kober Child
 Template: generatepress
 Description: Modernes, schnelles Child-Theme für Kober Aufzugtechnik
 Version: 2.0.0
*/

/* ===== Design Tokens ===== */
:root{
  --bg:#0B1220;          /* Seitenhintergrund dezent dunkel */
  --page:#F7F9FC;        /* Seitenfläche */
  --surface:#FFFFFF;     /* Karten/Flächen */
  --text:#0B1220;        /* Haupttext */
  --muted:#6B7688;       /* Sekundärtext */
  --primary:#2E55A7;     /* Logo-Blau */
  --accent:#FFD900;      /* Signalgelb als Akzent/CTA */
  --radius:14px;
  --shadow:0 12px 36px rgba(14,26,51,.12);
}

/* ===== Base ===== */
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg);
  color:var(--text);
  font:16px/1.65 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
}
h1,h2,h3,h4{font-family:"Manrope","Inter",system-ui,Segoe UI,Roboto,Ubuntu,sans-serif}
h1{font-weight:700; font-size:clamp(28px,5vw,44px); line-height:1.15}
h2{font-weight:700; font-size:clamp(22px,3.2vw,32px)}
a{color:var(--primary); text-decoration:none}
a:hover{opacity:.9}

/* Seite in hellem “Paper”-Look */
.site{background:var(--page); border-radius:16px 16px 0 0}
.site.grid-container{max-width:1200px}

/* ===== Header & Navigation ===== */
.site-header{background:#fff; box-shadow:0 2px 12px rgba(0,0,0,.06); position:sticky; top:0; z-index:999}
.main-navigation .main-nav ul li a{padding:1rem 1rem}
.main-navigation .main-nav ul li > a{
  position:relative; display:inline-block;
}
.main-navigation .main-nav ul li > a:after{
  content:""; position:absolute; left:0; bottom:-6px; height:3px; width:0; background:var(--accent); transition:width .22s ease;
}
.main-navigation .main-nav ul li.current-menu-item>a:after,
.main-navigation .main-nav ul li>a:hover:after{width:100%}

/* ===== Hero ===== */
.kober-hero{
  position:relative; overflow:hidden;
  border-radius:18px; padding:72px 26px; margin:24px 0 32px; color:#fff;
  background:
    linear-gradient(180deg,rgba(14,26,51,.92),rgba(20,41,79,.85)),
    url("./assets/hero.jpg") center/cover no-repeat;
}
.kober-hero--fallback{ /* wenn kein Bild vorhanden ist */
  background:linear-gradient(180deg,#0E1A33 0%, #14294F 65%, rgba(20,41,79,0) 100%);
}
.kober-hero p{color:#e6edf6; font-size:1.05rem; max-width:800px}
.kober-cta{display:inline-block; margin-top:14px; padding:.9rem 1.25rem; border-radius:.65rem; background:var(--accent); color:#111; font-weight:700}

/* ===== Grid / Cards ===== */
.kober-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:1000px){.kober-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.kober-grid{grid-template-columns:1fr}}

.kober-card{
  background:var(--surface); border:1px solid #e6ecf5;
  border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow);
}
.kober-card h3{margin:.2rem 0 .45rem; color:#0e1a33; font-size:1.12rem}
.kober-card p{margin:0; color:#3a4556}

/* ===== Sections ===== */
.section{margin:40px 0}
.section h2{margin:0 0 14px}
.section p.lead{color:#3a4556; max-width:800px}

/* ===== Footer ===== */
.site-footer{background:#0a1222; color:#d6deea}
.site-footer a{color:#d6deea; text-decoration:underline}
.footer-widgets{padding:2rem 1rem}
.footer-bar{border-top:1px solid #23314e}

/* ===== Forms ===== */
input,textarea,select{border:1px solid #e1e7f0; border-radius:.55rem; padding:.75rem .9rem}
input:focus,textarea:focus,select:focus{outline:2px solid rgba(14,26,51,.2); border-color:#b9c7db}
button, input[type=submit]{background:var(--accent); color:#111; border:0; border-radius:.6rem; padding:.9rem 1.1rem; font-weight:700}

/* Hauptcontainer über volle Breite */
.page .site-content,
.blog .site-content,
.single .site-content {
  display: block;
}

.content-area {
  width: 100% !important;
  float: none !important;
}

/* ==== Pro-Finish ==== */

/* Header kompakt + leichte Transparenz beim Scrollen */
.site-header{backdrop-filter:saturate(150%) blur(6px); background:rgba(255,255,255,.96)}

/* Navi-Underline präziser */
.main-navigation .main-nav ul li > a{letter-spacing:.2px}
.main-navigation .main-nav ul li > a:after{bottom:-8px}

/* Hero Textbreite & Reihenfolge */
.kober-hero{display:flex; flex-direction:column; gap:10px}
.kober-hero > *{max-width:860px}

/* CTA Button präsenter */
.kober-cta{box-shadow:0 6px 18px rgba(255,217,0,.25)}
.kober-cta:hover{transform:translateY(-1px); transition:transform .15s ease}

/* Cards: Hover-Effekt subtil */
.kober-card{transition:transform .15s ease, box-shadow .2s ease}
.kober-card:hover{transform:translateY(-2px); box-shadow:0 16px 42px rgba(14,26,51,.14)}
.kober-hero {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    padding: 60px 20px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.kober-hero::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45); /* Abdunkeln für bessere Lesbarkeit */
}

.kober-hero__content {
    position: relative;
    z-index: 1;
}

/* Icon-Grid für Leistungen */
.kober-icon-grid{
  display:grid; gap:18px; margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.kober-icon{
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid #E6ECF5; border-radius:12px;
  padding:22px; box-shadow:0 8px 24px rgba(14,26,51,.10);
  transition:transform .15s ease, box-shadow .2s ease;
}
.kober-icon:hover{ transform:translateY(-2px); box-shadow:0 16px 42px rgba(14,26,51,.14); }
.kober-icon img{ width:56px; height:56px; }
.kober-icon small{ display:block; margin-top:10px; color:#3a4556; font-weight:600; }
.kober-icon a{ display:flex; flex-direction:column; align-items:center; text-decoration:none; }
/* Kontaktformular modern */
.kontaktformular {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
}

.kontaktformular label {
    display: block;
    margin-top: 12px;
    font-weight: bold;
    color: #333;
}

.kontaktformular input,
.kontaktformular select,
.kontaktformular textarea {
    width: 100%;
    padding: 10px;
    margin-top: 4px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 15px;
}

.kontaktformular textarea {
    min-height: 100px;
    resize: vertical;
}

.kontakt-btn {
    margin-top: 20px;
    background-color: #0056a3;
    color: #fff;
    padding: 12px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: block;
}

.kontakt-btn:hover {
    background-color: #003f73;
}

.form-anliegen {
    display: none;
}

/* --- Sticky Footer für GeneratePress --- */
html, body { height: 100%; }

#page.site {                 /* äußerer Wrapper der Seite */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content.site-content {      /* Hauptbereich soll den Platz füllen */
  flex: 1 0 auto;
}

/* Der rechtliche Balken / Footer */
.site-footer, .kober-legal-bar {
  margin-top: auto;          /* schiebt den Footer an das Seitenende */
  width: 100%;
}

/* etwas Luft über dem Balken, damit er nicht am Inhalt „klebt“ */
.site-footer, .kober-legal-bar {
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Optional: kleine optische Aufwertung des Balkens */
.kober-legal-bar {
  background: #0F2134;       /* dunkles Blau */
  color: #ffffff;
  font-size: 14px;
}
.kober-legal-bar a { color:#fff; text-decoration:underline; }
.kober-legal-bar a:hover { opacity:.85; }

/* ===== Sticky Footer (robust für GeneratePress) ===== */
html, body { height: 100%; }

.site, #page.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-content, #content, .content-area {
  flex: 1 0 auto;   /* Inhalt füllt den freien Platz */
}

/* Footer/Legal-Balken immer ans Ende schieben */
.site-footer,
.kober-legal-bar {
  margin-top: auto;
  width: 100%;
}

/* Optische Korrekturen: keine Linie, etwas Luft */
.site-footer .inside-site-info { border-top: 0 !important; }
.kober-legal-bar { padding: 12px 0; }

/* (Optional) Balken-Style, falls eigener Legal-Bar benutzt wird */
.kober-legal-bar {
  background: #0F2134; color:#fff; font-size:14px;
}
.kober-legal-bar a { color:#fff; text-decoration:underline; }
.kober-legal-bar a:hover { opacity:.85; }

/* ===== Sticky Footer Korrektur ===== */
/* Nur der Inhaltsbereich füllt den freien Platz – NICHT der Footer */
.site, #page.site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* WICHTIG: nur .site-content / #content wachsen lassen */
.site-content, #content {
  flex: 1 0 auto;
}

/* Footer fixieren – darf nicht flexen */
footer.site-footer, .site-footer {
  flex: 0 0 auto !important;
  margin-top: 0; /* falls zuvor auto gesetzt war */
}

/* Unser rechtlicher Balken bleibt unten, aber ohne "aufzublähen" */
.kober-legal-bar {
  flex: 0 0 auto;
  margin-top: 0;
  padding: 12px 0;
  background: #0F2134; color:#fff; font-size:14px;
}
.kober-legal-bar a { color:#fff; text-decoration:underline; }
.kober-legal-bar a:hover { opacity:.85; }

/* ===== Kober: Legal-Bar fixiert unten, ohne Überlappen ===== */

/* Erst: alle evtl. früher gerenderten Legal-Balken außerhalb des Footers verstecken */
.site .kober-legal-bar:not(body > .kober-legal-bar) {
  display: none !important;
}

/* Fixierte Leiste */
.kober-legal-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: #0F2134;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.08);
  height: 56px;                  /* feste Höhe für Berechnung unten */
  display: flex;
  align-items: center;
}

/* Innenlayout */
.kober-legal-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}

.kober-legal-links a { color:#fff; text-decoration: underline; }
.kober-legal-links a:hover { opacity: .85; }

/* Inhalt unten frei halten, damit der fixierte Balken nichts überdeckt */
body { padding-bottom: 56px; }

/* Kleine Screens: etwas kompakter */
@media (max-width: 600px) {
  .kober-legal-bar { height: 64px; }
  body { padding-bottom: 64px; }
  .kober-legal-inner { flex-direction: column; gap: 6px; padding: 8px 12px; }
}

/* Entfernt ggf. störende Linien vom Theme-Footer */
.site-footer .inside-site-info { border-top: 0 !important; }
/* ===== Sticky Footer (flexibel, nicht fixed) ===== */

/* 1) Basis: Seite soll mindestens Viewport-Höhe haben */
html, body { height: 100%; }

/* 2) Body und #page als Flex-Container aufbauen */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* #page (GeneratePress Root) übernimmt den Rest der Höhe */
#page.site, .site {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* 3) Nur der Inhaltsbereich darf wachsen */
#content.site-content, .site-content, .content-area {
  flex: 1 0 auto;
}

/* 4) Footer/Balken an das Ende schieben */
footer.site-footer, .site-footer, .kober-legal-bar {
  margin-top: auto;
  flex: 0 0 auto;
}

/* 5) Falls vorher 'position:fixed' o.ä. gesetzt wurde -> hart überschreiben */
.kober-legal-bar {
  position: static !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
}

/* Optional: Optik */
.kober-legal-bar {
  background: #0F2134;
  color: #fff;
  padding: 12px 0;
  font-size: 14px;
}
.kober-legal-bar a { color:#fff; text-decoration: underline; }
.kober-legal-bar a:hover { opacity:.85; }

/* GeneratePress trennt manchmal mit Linie: entfernen */
.site-footer .inside-site-info { border-top: 0 !important; }
/* --- Viewport-sticky Legal-Bar --- */
.kober-legal-bar{
  position:fixed !important; left:0; right:0; bottom:0; z-index:9999;
  background:#0F2134; color:#fff; border-top:1px solid rgba(255,255,255,.08);
  height:56px; display:flex; align-items:center;
}
.kober-legal-inner{max-width:1200px; margin:0 auto; padding:0 16px;
  width:100%; display:flex; justify-content:space-between; gap:16px; font-size:14px;}
.kober-legal-bar a{color:#fff; text-decoration:underline;}
.kober-legal-bar a:hover{opacity:.85;}
/* Platz unten für die fixe Leiste, damit nichts überlappt */
body{padding-bottom:56px;}
@media(max-width:600px){ .kober-legal-bar{height:64px;} body{padding-bottom:64px;}
  .kober-legal-inner{flex-direction:column; gap:6px; padding:8px 12px;} }


/* === Breiten-Normalisierung je Seite (ohne Ränder zu verlieren) === */
/* Grupppen/Columns etc. sollen höchstens so breit sein wie der Seiten-Container */
.entry-content > .wp-block-group:not(.alignfull),
.entry-content > .wp-block-columns:not(.alignfull),
.entry-content > .wp-block-cover:not(.alignfull) {
  max-width: 1100px;   /* gleiche Zahl wie container_width */
  margin-left: auto;
  margin-right: auto;
}

/* "alignwide" nicht über Container hinaus – gleichmäßig wie die Startseite */
.entry-content > .alignwide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
/* === Kober: Einheitliche Seitenbreite (ohne Full-Width) === */
:root { --kober-container: 1100px; } /* << Nur HIER anpassen, z.B. 1200px */

.entry-content > *:not(.alignfull) {
  max-width: var(--kober-container);
  margin-left: auto;
  margin-right: auto;
}

/* Häufige Gutenberg-Wrapper auf Containerbreite begrenzen */
.entry-content > .wp-block-group:not(.alignfull),
.entry-content > .wp-block-columns:not(.alignfull),
.entry-content > .wp-block-cover:not(.alignfull),
.entry-content > .wp-block-media-text:not(.alignfull),
.entry-content > .alignwide {
  max-width: var(--kober-container);
  margin-left: auto;
  margin-right: auto;
}

/* Sicherheit: Innenabstände bleiben bestehen, nichts klebt am Rand */
.entry-content > * { box-sizing: border-box; }

/* === Breiten-Normalisierung je Seite (ohne Ränder zu verlieren) === */
/* Grupppen/Columns etc. sollen höchstens so breit sein wie der Seiten-Container */
.entry-content > .wp-block-group:not(.alignfull),
.entry-content > .wp-block-columns:not(.alignfull),
.entry-content > .wp-block-cover:not(.alignfull) {
  max-width: 1100px;   /* gleiche Zahl wie container_width */
  margin-left: auto;
  margin-right: auto;
}

/* "alignwide" nicht über Container hinaus – gleichmäßig wie die Startseite */
.entry-content > .alignwide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Einheitliche Breite für alle Hauptblöcke */
.entry-content > *:not(.alignfull) {
  max-width: 1100px; /* muss mit container_width übereinstimmen */
  margin-left: auto;
  margin-right: auto;
}

/* "alignwide" ebenfalls auf Containerbreite limitieren */
.entry-content > .alignwide {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== KOBER WIDTH/FIXES (override) ===== */

/* Einheitliche Seitenbreite über GeneratePress-Container */
:root { --kober-content-width: 1100px; }
.site .grid-container,
.site.grid-container {
  max-width: var(--kober-content-width) !important; /* sticht Zeile 36 aus */
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

/* Niemals den Hauptinhalt künstlich verengen */
.page .site-content,
.blog .site-content,
.single .site-content,
#content.site-content,
.content-area {
  max-width: none !important; /* sticht Regelsatz 93–99, 262–293 aus */
}

/* Gutenberg-Blöcke: innerhalb der Content-Breite bleiben */
.entry-content > .wp-block-group:not(.alignfull),
.entry-content > .wp-block-columns:not(.alignfull),
.entry-content > .wp-block-cover:not(.alignfull),
.entry-content > .wp-block-media-text:not(.alignfull),
.entry-content > .alignwide,
.entry-content > *:not(.alignfull) {
  max-width: 100% !important;   /* sticht 430–492 aus */
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* Kontaktseite: nur das Formular schmaler (nicht die Seite) */
body.page-id-43 .kontaktformular {
  max-width: 760px;
  margin: 20px auto;
}

/* Sticky Footer zuverlässig */
html, body { height: 100%; }
#page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.site-content { flex: 1 0 auto; }
.site-footer { margin-top: auto; }

/* Footer-Leiste (Impressum/Datenschutz) hübsch mit Abstand */
.kober-legal-bar {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  align-items: center;
  padding: 10px 24px;
  font-size: 14px;
  opacity: .9;
}

/* === KOBER: Sticky Footer – berührt keine Breiten === */
html, body { height: 100%; }
#page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.site-content { flex: 1 0 auto; }     /* Inhalt füllt die Höhe */
.site-footer { margin-top: auto; }    /* Footer immer nach unten */

.kober-legal-bar {                     /* deine Impressum/Datenschutz-Leiste */
  display: flex; gap: 18px; align-items: center; justify-content: flex-end;
  padding: 10px 24px;
  font-size: 14px;
  opacity: .9;
}

/* === FIXER RECHTS-FOOTER (nur Leiste), KEINE Breiten-Änderungen === */
:root { --legal-h: 56px; }  /* Höhe der Leiste, bei Bedarf anpassen */

.kober-legal-bar {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  height: var(--legal-h);
  display: flex; gap: 18px; align-items: center; justify-content: flex-end;
  padding: 10px 24px;
  background: #0F2134; color: #fff;
  z-index: 9999;
}

/* Platz für die feste Leiste schaffen, damit nichts überlappt */
body { margin-bottom: var(--legal-h) !important; }

/* Theme-Footer ausblenden, damit die Leiste alleine unten sitzt */

:root { --legal-h: 56px; } /* Höhe des Balkens nach Bedarf anpassen */

.kober-legal-bar{
  position: fixed; left:0; right:0; bottom:0; height: var(--legal-h);
  display:flex; gap:18px; align-items:center; justify-content:flex-end;
  padding:10px 24px; background:#0F2134; color:#fff; z-index:9999;
}
.kober-legal-bar a{color:#fff; text-decoration:underline;}
.kober-legal-bar a:hover{opacity:.85;}

/* Platz für den fixen Balken, damit Footer/Content nicht überdeckt werden */
body{ margin-bottom: var(--legal-h); }

/* Kontakt – Quick-Info-Panel */
.kontakt-quick h2, .kontakt-quick h3 { color:#0F2134; }
.kontakt-quick a { color:#003f73; }
.kontakt-quick a:hover { opacity:.85; }

/* Instagram Button floating right middle */
.insta-float {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  background: white;
  padding: 6px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.insta-float img {
  display: block;
  width: 40px;
  height: 40px;
}
.insta-float:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Kontakt: Kachel-Layout */
.kontakt-kacheln{
  display:grid; gap:16px; margin:16px 0 28px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.kontakt-card{
  background:#f5f6f7; border:1px solid #e6e8ea; border-radius:10px;
  padding:18px; box-shadow:0 1px 3px rgba(0,0,0,.04);
}
.kontakt-card h3{ margin:0 0 6px; font-size:18px }
.kontakt-card a{ text-decoration:none }
.kontakt-card a:hover{ text-decoration:underline }

.page-id-151 .entry-title {
    display: none;
}/* Kontaktseite: WP-Seitentitel ausblenden */
.page-id-151 .entry-title { display: none; }