/* index.css – nur Startseite. Geteilte Komponenten stehen in ako-styles.css */
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:ital,wght@0,400;0,700;1,400&family=Oswald:wght@400;600;700&display=swap');

/* ========== RESET & BASE ========== */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:'Comic Neue',cursive;
  background:#e8e0d0;
  color:#1a1a1a;
  overflow-x:hidden;
}

/* ========== NAV ========== */
.ako-nav{
  background:#1a1a1a;
  border-bottom:4px solid #f5c518;
  position:sticky;top:0;z-index:900;
}
.nav-inner{
  max-width:1100px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;height:58px;
}
.nav-address{
  font-family:'Oswald',sans-serif;font-size:.58rem;line-height:1.45;
  letter-spacing:1.2px;text-transform:uppercase;color:#f2f2f2;
}
.nav-address a{color:#f5c518;text-decoration:none;font-weight:700;}
.header-notdienst{
  height:100%;min-height:200px;background:#9d201b;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1rem;text-align:center;
}
.header-notdienst .emergency-label{
  font-family:'Oswald',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;background:#f5c518;color:#1a1a1a;
  padding:3px 8px;margin-bottom:.5rem;
}
.header-notdienst h1{font-family:'Bangers',cursive;font-size:2.3rem;letter-spacing:3px;line-height:1;color:#fff;}
.header-notdienst p{font-size:.78rem;line-height:1.35;margin:.55rem 0 .8rem;font-weight:700;}
.header-notdienst a{font-family:'Oswald',sans-serif;font-size:1.15rem;font-weight:700;letter-spacing:1.5px;color:#1a1a1a;background:#f5c518;border:2px solid #1a1a1a;padding:.35rem .65rem;text-decoration:none;box-shadow:3px 3px 0 #1a1a1a;}
.logo-nav{
  font-family:'Bangers',cursive;
  font-size:1.9rem;letter-spacing:3px;
  color:#fff;text-decoration:none;
  text-shadow:none;
}
.logo-nav span{
  font-family:'Oswald',sans-serif;font-weight:400;
  font-size:0.7rem;letter-spacing:3px;color:#aaa;
  display:block;line-height:1;text-shadow:none;
}
.nav-links{list-style:none;display:flex;gap:0;align-items:center;}
.nav-links a{
  font-family:'Oswald',sans-serif;font-weight:600;
  font-size:0.8rem;letter-spacing:1.5px;text-transform:uppercase;
  color:#ccc;text-decoration:none;
  padding:0.35rem 0.55rem;border:1.5px solid transparent;
  transition:all .15s;display:block;
}
.nav-links a:hover{color:#f5c518;border-color:#f5c518;}
.nav-notdienst{
  background:#c0392b!important;color:#fff!important;
  border-color:#c0392b!important;
  min-width:108px;text-align:center;white-space:nowrap;
  animation:pulse-nav 2.5s infinite;
}
/* Verlinkte Leistungskacheln erhalten einen klaren Klickhinweis. */
.service-panel > a[aria-label]{cursor:pointer;}
.service-panel > a[aria-label]::after{content:'Mehr erfahren ›';position:absolute;right:.75rem;bottom:.7rem;background:#1a1a1a;color:#fff;font:700 .72rem/1 'Oswald',sans-serif;letter-spacing:.8px;text-transform:uppercase;padding:.45rem .6rem;}
@keyframes pulse-nav{
  0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.7);}
  50%{box-shadow:0 0 0 5px rgba(192,57,43,0);}
}
.hamburger{
  display:none;flex-direction:column;gap:5px;
  cursor:pointer;background:none;border:2px solid #f5c518;padding:7px;
}
.hamburger span{display:block;width:22px;height:2px;background:#f5c518;}
.mobile-menu{
  display:none;background:#1a1a1a;
  border-top:2px solid #f5c518;
  position:absolute;top:58px;left:0;right:0;z-index:800;
}
.mobile-menu.open{display:block;}
.mobile-menu a{
  display:block;font-family:'Oswald',sans-serif;
  font-size:1rem;letter-spacing:2px;text-transform:uppercase;
  color:#ccc;text-decoration:none;
  padding:.9rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-menu a:hover{color:#f5c518;}

/* ========== COMIC PAGE WRAPPER ========== */
.comic-page{
  max-width:1100px;margin:0 auto;
  padding:0 1.5rem 1.5rem;
}

/* ========== PANEL STYLES ========== */
/* Panels have thick ink border, white bg, slight drop shadow */
.panel{
  position:relative;
  border:3px solid #1a1a1a;
  background:#fff;
  overflow:hidden;
  box-shadow:4px 4px 0 #1a1a1a;
}
.panel img{
  width:100%;height:100%;object-fit:cover;
  display:block;
}

/* Caption box – top-left narration box */
.caption{
  position:absolute;
  background:#fffde0;
  border:2px solid #1a1a1a;
  font-family:'Comic Neue',cursive;
  font-weight:700;font-size:0.78rem;
  line-height:1.35;
  padding:5px 9px;
  max-width:220px;
  z-index:10;
}
.caption.top-left{top:10px;left:10px;}
.caption.top-right{top:10px;right:10px;}
.caption.bottom-left{bottom:10px;left:10px;}
.caption.bottom-right{bottom:10px;right:10px;}

/* Speech bubble */
.bubble{
  position:absolute;
  background:#fff;
  border:2.5px solid #1a1a1a;
  border-radius:16px;
  font-family:'Comic Neue',cursive;
  font-weight:700;
  font-size:0.82rem;
  line-height:1.35;
  padding:8px 12px;
  max-width:200px;
  z-index:20;
  text-align:center;
}
/* Tail pointing down-left */
.bubble::after{
  content:'';
  position:absolute;
  bottom:-14px;left:24px;
  border:7px solid transparent;
  border-top-color:#1a1a1a;
}
.bubble::before{
  content:'';
  position:absolute;
  bottom:-10px;left:26px;
  border:6px solid transparent;
  border-top-color:#fff;
  z-index:1;
}
/* Tail variants */
.bubble.tail-right::after{
  bottom:auto;top:50%;right:-14px;left:auto;
  transform:translateY(-50%);
  border:7px solid transparent;border-left-color:#1a1a1a;
}
.bubble.tail-right::before{
  bottom:auto;top:50%;right:-10px;left:auto;
  transform:translateY(-50%);
  border:6px solid transparent;border-left-color:#fff;
  z-index:1;
}
.bubble.tail-bottom-right::after{
  bottom:-14px;right:24px;left:auto;
  border:7px solid transparent;border-top-color:#1a1a1a;
}
.bubble.tail-bottom-right::before{
  bottom:-10px;right:26px;left:auto;
  border:6px solid transparent;border-top-color:#fff;
  z-index:1;
}
/* Shout / jagged bubble */
.bubble-shout{
  position:absolute;z-index:20;
  background:#f5c518;
  font-family:'Bangers',cursive;
  font-size:1.15rem;letter-spacing:1.5px;
  padding:10px 16px;
  border:3px solid #1a1a1a;
  /* Jagged edges via clip-path */
  clip-path:polygon(
    5% 20%, 0% 0%, 20% 8%, 40% 0%, 60% 6%, 80% 0%, 100% 10%,
    95% 40%, 100% 60%, 90% 80%, 100% 100%, 75% 92%, 50% 100%, 30% 94%, 10% 100%, 0% 80%,
    5% 60%, 0% 40%
  );
  text-align:center;line-height:1.2;
}

/* Placeholder panel – for service sub-pages */
.panel-placeholder{
  background:#d0cfc0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:8px;min-height:200px;
}
.panel-placeholder svg{opacity:0.4;}
.placeholder-label{
  font-family:'Oswald',sans-serif;
  font-size:0.7rem;letter-spacing:3px;
  text-transform:uppercase;color:#666;
  text-align:center;padding:0 1rem;
}
.panel-placeholder .ph-service{
  font-family:'Bangers',cursive;
  font-size:1.5rem;letter-spacing:2px;color:#555;
}

/* ========== HERO SPLASH PAGE ========== */
/* The hero is laid out like a comic page with multiple panels */
.splash-row{
  display:grid;
  gap:0;/* panels touch each other – true comic style */
}

/* === ROW 1: 3 small panels === */
.row-top{
  grid-template-columns:2fr 1fr;
  height:200px;
}
/* Titel-Panel (SUPER SAUGER) – ersetzt das frühere Notdienst-Panel */
.panel-title{
  background:#1a1a1a;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.55rem;padding:1rem 1.4rem;text-align:center;
}
.title-eyebrow{
  font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:3px;
  color:#f2f2f2;text-transform:uppercase;
}
.title-word{
  font-family:'Bangers',cursive;font-size:3.6rem;line-height:1;letter-spacing:4px;
  color:#f5c518;text-shadow:4px 4px 0 #e8730a;
}
.title-claims{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:.35rem .75rem;margin-top:.25rem;
  font-family:'Oswald',sans-serif;font-weight:700;font-size:.82rem;
  letter-spacing:1.5px;text-transform:uppercase;color:#f4f4f4;
}
.title-claims .sep{color:#f5c518;}
/* === ROW 2: HERO CENTER === */
.row-hero{
  grid-template-columns:1fr;
  height:480px;
}
/* === ROW 3: 2 panels + 1 === */
.row-mid{
  grid-template-columns:1.2fr 0.8fr 1fr;
  height:220px;
}
/* === ROW 4: footer strip === */
.row-bottom{
  grid-template-columns:1fr 1fr;
  height:180px;
}

/* ========== SERVICES SECTION ========== */
.services-section{
  margin-top:0;
}
.services-header{
  border:3px solid #1a1a1a;
  background:#1a1a1a;
  padding:.7rem 1.5rem;
  display:flex;align-items:center;gap:1rem;
  margin-bottom:0;
}
.services-header h2{
  font-family:'Bangers',cursive;
  font-size:2rem;letter-spacing:3px;
  color:#f5c518;
}
.services-header p{
  font-family:'Oswald',sans-serif;
  font-size:0.8rem;letter-spacing:2px;
  color:#aaa;text-transform:uppercase;
}

/* 3×2 service grid */
.services-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  column-gap:0;
  row-gap:14px;
}
.service-panel{
  border:3px solid #1a1a1a;
  border-left:none;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  transition:transform .12s,z-index 0s;
}
.service-panel:nth-child(3n+1){border-left:3px solid #1a1a1a;}
.service-panel:hover{
  transform:scale(1.03);
  z-index:10;
  box-shadow:6px 6px 0 #1a1a1a;
}
.service-panel-img{
  width:100%;height:180px;
  display:block;object-fit:cover;
}
.service-panel-body{
  background:#fff;padding:.9rem 1rem;
  border-top:2.5px solid #1a1a1a;
}
.service-panel-title{
  font-family:'Bangers',cursive;
  font-size:1.3rem;letter-spacing:1.5px;
  color:#1a1a1a;margin-bottom:.3rem;
}
.service-panel-text{
  font-size:.78rem;line-height:1.45;color:#444;
}
.service-panel-list{
  list-style:none;margin-top:.5rem;
}
.service-panel-list li{
  font-family:'Oswald',sans-serif;
  font-size:.72rem;letter-spacing:.5px;
  color:#555;padding:2px 0;
  display:flex;align-items:center;gap:5px;
}
.service-panel-list li::before{content:'▸';color:#e8730a;font-size:.6rem;}

/* ========== ABOUT / STATS ========== */
.about-strip{
  margin-top:0;
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
  border:3px solid #1a1a1a;
}
.about-comic-panel{
  position:relative;overflow:hidden;min-height:320px;
  background:#c8d8e0;
}
.about-comic-panel img{
  width:100%;height:100%;object-fit:cover;
}
.about-text-panel{
  background:#fff;padding:2rem;
  border-left:3px solid #1a1a1a;
}
.about-title{
  font-family:'Bangers',cursive;
  font-size:2.5rem;letter-spacing:2px;color:#1a1a1a;
  line-height:1;margin-bottom:1rem;
}
.about-title span{color:#e8730a;}
.about-body{
  font-size:.88rem;line-height:1.6;color:#333;
  margin-bottom:1.2rem;
}
.stats-comic{
  display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.2rem;
}
.stat-badge{
  border:2.5px solid #1a1a1a;
  background:#fffde0;
  padding:.5rem .9rem;text-align:center;
  box-shadow:3px 3px 0 #1a1a1a;
}
.stat-num{
  font-family:'Bangers',cursive;font-size:2.2rem;
  line-height:1;color:#e8730a;
}
.stat-label{
  font-family:'Oswald',sans-serif;font-size:.65rem;
  letter-spacing:1.5px;text-transform:uppercase;color:#555;
}

/* ========== NOTDIENST STRIP ========== */
.notdienst-strip{
  margin-top:0;
  border:3px solid #1a1a1a;
  background:#c0392b;
  display:flex;align-items:center;
  justify-content:space-between;
  padding:1.2rem 2rem;
  gap:1.5rem;flex-wrap:wrap;
  box-shadow:5px 5px 0 #1a1a1a;
  position:relative;overflow:hidden;
}
.notdienst-strip::before{
  content:'!!! NOTFALL !!! NOTFALL !!! NOTFALL !!! NOTFALL !!! NOTFALL !!! NOTFALL !!! NOTFALL !!!';
  position:absolute;top:0;left:0;
  font-family:'Oswald',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:2px;color:rgba(0,0,0,.15);
  white-space:nowrap;padding:2px 0;
}
.nd-text{color:#fff;}
.nd-badge{
  background:#f5c518;color:#1a1a1a;
  font-family:'Bangers',cursive;font-size:.85rem;
  letter-spacing:3px;padding:3px 10px;display:inline-block;
  margin-bottom:.3rem;
}
.nd-title{
  font-family:'Bangers',cursive;font-size:2.2rem;
  letter-spacing:2px;line-height:1;
  text-shadow:2px 2px 0 rgba(0,0,0,.3);
}
.nd-sub{
  font-family:'Oswald',sans-serif;font-size:.85rem;
  letter-spacing:1px;opacity:.9;margin-top:.2rem;
}
.btn-nd{
  font-family:'Bangers',cursive;font-size:1.5rem;
  letter-spacing:2px;
  background:#f5c518;color:#1a1a1a;
  border:4px solid #1a1a1a;
  padding:.6rem 2rem;text-decoration:none;
  box-shadow:5px 5px 0 #1a1a1a;display:inline-block;
  white-space:nowrap;
  animation:shake 5s ease-in-out infinite;
}
@keyframes shake{
  0%,88%,100%{transform:translate(0,0);}
  90%{transform:translate(-3px,0);}
  92%{transform:translate(3px,0);}
  94%{transform:translate(-2px,0);}
  96%{transform:translate(2px,0);}
}

/* ========== KONTAKT ========== */
.kontakt-section{
  margin-top:0;
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
  border:3px solid #1a1a1a;
}
.kontakt-info{
  background:#1a1a1a;padding:2rem;
  border-right:3px solid #1a1a1a;
}
.kontakt-title{
  font-family:'Bangers',cursive;
  font-size:2rem;letter-spacing:2px;
  color:#f5c518;margin-bottom:1.5rem;
  border-bottom:2px solid #e8730a;padding-bottom:.6rem;
}
.k-row{
  display:flex;align-items:flex-start;gap:.8rem;
  margin-bottom:1.1rem;
}
.k-icon{
  width:36px;height:36px;
  background:#f5c518;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;flex-shrink:0;
  border:2px solid #f5c518;
}
.k-detail strong{
  display:block;font-family:'Oswald',sans-serif;
  font-size:.65rem;letter-spacing:2px;
  text-transform:uppercase;color:#e8730a;margin-bottom:1px;
}
.k-detail span{
  font-family:'Oswald',sans-serif;font-size:.9rem;color:#eee;
}
.k-detail a{color:#f5c518;text-decoration:none;}
.kontakt-form{background:#fff;padding:2rem;}
.form-title-comic{
  font-family:'Bangers',cursive;font-size:1.7rem;
  letter-spacing:2px;color:#1a1a1a;
  margin-bottom:1.2rem;border-bottom:2.5px solid #f5c518;
  padding-bottom:.4rem;
}
.form-row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;}
.form-grp{margin-bottom:.8rem;}
.form-lbl{
  display:block;font-family:'Oswald',sans-serif;
  font-size:.65rem;letter-spacing:2px;text-transform:uppercase;
  color:#555;margin-bottom:3px;font-weight:600;
}
.form-input,.form-ta{
  width:100%;border:2px solid #1a1a1a;
  padding:.5rem .7rem;font-family:'Comic Neue',cursive;
  font-size:.85rem;background:#f8f5ee;color:#1a1a1a;
}
.form-input:focus,.form-ta:focus{
  border-color:#e8730a;background:#fff;
  box-shadow:3px 3px 0 #e8730a;
}
.form-ta{height:100px;resize:vertical;}
.form-submit{
  width:100%;font-family:'Bangers',cursive;font-size:1.3rem;
  letter-spacing:2px;background:#e8730a;color:#fff;
  border:3px solid #1a1a1a;padding:.55rem;cursor:pointer;
  box-shadow:4px 4px 0 #1a1a1a;transition:all .1s;
  margin-top:.3rem;
}
.form-submit:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #1a1a1a;}



/* ========== PAGE NUMBER (comic style) ========== */
.page-number{
  text-align:right;padding:.5rem 0;
  font-family:'Bangers',cursive;font-size:1rem;
  letter-spacing:2px;color:#888;
}

/* ========== RESPONSIVE ========== */
@media(max-width:900px){
  .row-top{grid-template-columns:1.5fr 1fr;height:auto;}
  .row-top .panel{min-height:200px;}
  .title-word{font-size:3rem;}
  .title-claims{font-size:.75rem;}
  .row-mid{grid-template-columns:1fr 1fr;height:auto;}
  .row-mid .panel:last-child{display:none;}
  .row-bottom{height:auto;}
  .row-hero{height:320px;}
  .services-grid{grid-template-columns:1fr 1fr;}
  .about-strip{grid-template-columns:1fr;}
  .about-comic-panel{min-height:220px;}
  .about-text-panel{border-left:none;border-top:3px solid #1a1a1a;}
  .kontakt-section{grid-template-columns:1fr;}
  .kontakt-info{border-right:none;border-bottom:3px solid #1a1a1a;}
  .oo_footer-grid{grid-template-columns:1fr 1fr;}
  .nav-links{display:none;}
  .nav-address{display:none;}
  .hamburger{display:flex;}
  .ako-nav{position:sticky;}
}
@media(max-width:1100px){.nav-address{display:none;}.nav-inner{padding:0 1rem;}}
@media(max-width:600px){
  .row-top{grid-template-columns:1fr;height:auto;}
  .row-top .panel:last-child{display:none;}
  .title-word{font-size:2.8rem;}
  .row-mid{grid-template-columns:1fr;height:auto;}
  .row-bottom{grid-template-columns:1fr;height:auto;}
  .row-hero{height:250px;}
  .services-grid{grid-template-columns:1fr;}
  .ooo_footer-grid{grid-template-columns:1fr;}
  .form-row2{grid-template-columns:1fr;}
  .kontakt-section{grid-template-columns:1fr;}
  .bubble{display:none;}
  .caption{font-size:.7rem;max-width:160px;}
}

/* ========== PLACEHOLDER PANELS ========== */
/* These use inline SVG as background – no external images needed yet */
.ph{
  width:100%;height:100%;min-height:inherit;
  position:relative;
  overflow:hidden;
}

/* Service placeholder colour themes */
.ph-altbau    {background:linear-gradient(145deg,#3a2a1a,#2a1a0a);}  /* umbenannt – nicht mehr verwendet */

.ph-biogas    {background:linear-gradient(145deg,#1a4a5a,#0a2a3a);}
.ph-entsorgung{background:linear-gradient(145deg,#6a5a7a,#4a3a5a);}
.ph-industrie {background:linear-gradient(145deg,#5a6a8a,#3a4a6a);}
.ph-kraftwerk {background:linear-gradient(145deg,#7a5a3a,#5a3a1a);}

.ph-label{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(0,0,0,.6);
  font-family:'Bangers',cursive;font-size:.95rem;
  letter-spacing:2px;color:#f5c518;
  padding:6px 10px;text-align:center;
  border-top:2px solid rgba(255,197,24,.4);
}
.ph-icon{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-60%);
  opacity:0.25;
}
.ph-ai-note{
  position:absolute;top:8px;right:8px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.3);
  font-family:'Oswald',sans-serif;font-size:.55rem;
  letter-spacing:1px;text-transform:uppercase;
  color:rgba(255,255,255,.7);padding:3px 7px;
}
/* Startseite: Die Leistungsfelder zeigen echte Comic-Szenen statt Platzhaltergrafiken. */
.services-grid .service-panel .ph{background-position:center;background-size:cover;background-repeat:no-repeat;}
.services-grid .service-panel .ph-icon,.services-grid .service-panel .ph-ai-note{display:none;}
.services-grid .service-panel:nth-child(1) .ph{background-image:url('images/industriereinigung-01.webp');}
.services-grid .service-panel:nth-child(2) .ph{background-image:url('images/kraftwerksservice-02.webp');}
.services-grid .service-panel:nth-child(3) .ph{background-image:url('images/biogas-comic-03-v2.webp');}
.services-grid .service-panel:nth-child(4) .ph{background-image:url('images/entsorgung-01.webp');}
.services-grid .service-panel:nth-child(5) .ph{background-image:url('images/ueberuns01.webp');}
.services-grid .service-panel:nth-child(6) .ph{background-image:url('images/24StdNotdienst-02.webp');}
.services-grid .service-panel:nth-child(6) > div > div{background:url('images/24StdNotdienst-02.webp') center/cover no-repeat !important;}
.services-grid .service-panel:nth-child(6) > div > div > svg{display:none;}
.services-grid .service-panel:nth-child(6) > div > div{background:#8a1515!important;}
.services-grid .service-panel:nth-child(5) .ph{background-image:url('images/ueberuns01.webp');}
.comic-page .panel,.services-grid,.service-panel,.notdienst-strip,.about-strip,.kontakt-section{box-shadow:none!important;}
.header-notdienst .emergency-label{display:none;}
/* Startseiten-Navigation entspricht der gemeinsamen Unterseiten-Navigation. */
.logo-nav .logo-nav-sub{font-family:var(--font-ui);font-weight:400;font-size:.58rem;letter-spacing:2.5px;text-transform:uppercase;color:#d6d6d6;line-height:1.5;text-shadow:none;}
.nav-links a{font-size:.75rem;padding:.4rem .85rem;}