/* Zentraler Style für afd-rpk.de
*/

:root{
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #262626;
  --muted: #555b61;
  --line: #cfd4d9;
  --link: #262626;
  --link-hover: #000000;
  --maxw: 1100px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body{
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

/* Container */
.nav-inner, .footer-inner{
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 10px 14px;
}

/* Navigation */
.site-nav{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo{
  height: 60px;
  width: auto;
  display: block;
}

.nav-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nav-toggle{
  display: none;
  font: inherit;
  border: 1px solid var(--line);
  background: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.nav-menu{
  display: block;
}

.nav-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 14px;
  align-items: center;
}

.nav-link{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--link);
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  background: transparent;
  cursor: pointer;
}

.nav-link:hover{
  color: var(--link-hover);
  border-color: var(--line);
  background: #fff;
}

.nav-link.is-active{
  border-color: var(--line);
  background: #fff;
}

/* Dropdown */
.has-dropdown{
  position: relative;
}

.dropdown{
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.10);
  z-index: 2000;
}

.dropdown li{ list-style: none; }

.has-dropdown.open > .dropdown{
  display: block;
}

/* Desktop: Hover öffnet */
@media (min-width: 901px){
  .has-dropdown:hover > .dropdown{
    display: block;
  }
}

/* Footer */
.site-footer{
  background: var(--surface);
  border-top: 1px solid var(--line);
  margin-top: 40px;
}

.footer-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-links a{
  color: var(--link);
  text-decoration: none;
}

.footer-links a:hover{
  text-decoration: underline;
}

.sep{
  color: var(--muted);
  padding: 0 8px;
}

.footer-copy{
  color: var(--muted);
}

/* Mobile */
@media (max-width: 900px){
  .nav-toggle{
    display: inline-flex;
  }

  .nav-menu{
    display: none;
    width: 100%;
  }

  .nav-menu.open{
    display: block;
  }

  .nav-inner{
    flex-wrap: wrap;
  }

  .nav-list{
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-top: 10px;
  }

  .nav-link{
    width: 100%;
    justify-content: flex-start;
  }

  .dropdown{
    position: static;
    min-width: 0;
    box-shadow: none;
    border-radius: 10px;
    margin-top: 6px;
  }
}

/* === Basis-Layout-Fix (ersetzt Bootstrap-Grundfunktionen) === */

.page-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 14px;
}

.tiles .row{
  display: flex;
  flex-wrap: wrap;
  margin-left: -12px;
  margin-right: -12px;
}

/* === Spezial: Energie-Rechner isolieren === */

.rechner-isolated .row,
.rechner-isolated [class^="col-"] {
    all: initial;
    box-sizing: border-box;
}

.rechner-isolated .row {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr;
    gap: 12px;
}

@media (max-width: 980px) {
    .rechner-isolated .row {
        grid-template-columns: 1fr;
    }
}

.tiles [class^="col-"]{
  padding-left: 12px;
  padding-right: 12px;
}

.tiles .col-md-4{
  width: 33.3333%;
}

@media (max-width: 900px){
  .tiles .col-md-4{
    width: 100%;
  }
}

.isolated{
  all: initial;
  font-family: Arial, Helvetica, sans-serif;
}
.isolated *{
  all: unset;
  box-sizing: border-box;
}

/* === Anker-Fix für fixe Navbar === */

h1, h2, h3, h4, h5, h6{
  scroll-margin-top: 110px;
}

.infografik-wrap{
  margin: 12px 0 14px 0;     /* harmonischer Abstand zum Text */
  display: flex;
  justify-content: center;   /* sauber zentriert */
}

.infografik{
  display: block;
  width: 100%;
  max-width: 760px;          /* Desktop: nicht zu groß */
  height: auto;
}

/* Mobile: bewusst kleiner, damit es nicht "wuchtig" wird */
@media (max-width: 600px){
  .infografik{
    max-width: 230px;        /* 320–360px ist i. d. R. harmonisch */
  }
}