/* assets/css/site.css
   Forty ist Basis (main.css). Diese Datei ist Overlay für:
   - dein Header/Footer (Component)
   - Burger/Mobile (dein JS)
   - Tabs/Buttons, Legal-Seiten
   - Forty-Banner/Tiles Feintuning (Lesbarkeit + Proportionen)
*/

:root{
  --ja-line: rgba(255,255,255,.14);
  --ja-soft: rgba(255,255,255,.06);
  --ja-radius: 8px;
}

/* Scroll-Offset (JS setzt dynamisch) */
html{
  scroll-padding-top: 84px;
}

/* Translate Placeholder */
#translate-placeholder{
  display:inline-flex;
  align-items:center;
}

/* -----------------------
   HEADER (Forty-like, aber stabil)
   ----------------------- */

.header{
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* WICHTIG:
   Forty nutzt .inner an vielen Stellen. Damit dein Header nicht “auseinandergezogen”
   wird, geben wir dem Header-inner eine saubere max-width + padding.
*/
.header .inner{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.1rem;
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap: .9rem;
  flex: 0 0 auto;
}

.brand__logo{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display:block;
}

.brand__text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  min-width: 0;
}

.brand__name{
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}

.brand__sub{
  font-size: .85rem;
  opacity: .75;
  white-space: nowrap;
}

/* Desktop Nav: nicht umbrechen, nicht “auseinanderziehen” */
.nav{
  display:flex;
  align-items:center;
  gap: .65rem;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.nav__link{
  font-size: .75rem;                 /* kleiner -> kein Umbruch */
  letter-spacing: .14em;             /* Forty-Feeling */
  text-transform: uppercase;
  opacity: .82;
  padding: .35rem .5rem;
  border-radius: 6px;
  white-space: nowrap;               /* ÜBER / MICH nicht splitten */
}

.nav__link:hover{
  background: var(--ja-soft);
  opacity: 1;
}

/* Active Link */
.nav__link.is-active{
  opacity: 1;
  outline: 1px solid rgba(155, 241, 255, .25);
  background: rgba(155, 241, 255, .08);
}

/* Header actions */
.header__actions{
  display:flex;
  align-items:center;
  gap: .6rem;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Buttons (deine Klassen, Forty-Optik) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 2.6rem;
  padding: 0 .95rem;
  border-radius: 6px;
  border: 1px solid var(--ja-line);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 650;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, transform .15s ease, filter .15s ease;
}

.btn:hover{
  background: rgba(255,255,255,.07);
}

.btn:active{
  transform: translateY(1px);
}

.btn--primary{
  border-color: rgba(155, 241, 255, .35);
  background: rgba(155, 241, 255, .12);
}

.btn--call{
  background: rgba(255,255,255,.06);
}

.btn--cal{
  border-color: rgba(155, 241, 255, .35);
  background: rgba(155, 241, 255, .10);
}

.btn--wa{
  border-color: rgba(46, 204, 113, .35);
  background: rgba(46, 204, 113, .10);
}

.btn--block{ width:100%; }

/* Burger */
.burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--ja-line);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  position: relative;
}

.burger span{
  position:absolute;
  left: 11px;
  right: 11px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 999px;
}

.burger span:nth-child(1){ top: 14px; }
.burger span:nth-child(2){ top: 21px; }
.burger span:nth-child(3){ top: 28px; }

/* Mobile Panel (Forty-like), bleibt von deinem JS gesteuert */
#menu.mobile{
  border-top: 1px solid var(--ja-line);
  background: rgba(36, 41, 67, .96);
}

.mobile__inner{
  padding: 1rem 0 1.25rem;
  display:grid;
  gap: .65rem;
}

.mobile__link{
  padding: .7rem .85rem;
  border-radius: 6px;
  border: 1px solid var(--ja-line);
  background: rgba(255,255,255,.04);
}

.mobile__cta{
  display:grid;
  gap: .65rem;
  margin-top: .25rem;
}

/* Responsive Header */
@media (max-width: 980px){
  .nav{ display:none; }
  .burger{ display:inline-block; }
}

/* -----------------------
   FORTY BANNER: Lesbarkeit + Höhe fixen
   ----------------------- */

/* Forty setzt Banner oft sehr “luftig”. Wir ziehen es kompakter. */
#banner{
  padding: 5rem 0 3.5rem;
}

#banner.major{
  padding: 6rem 0 4rem;
}

/* Dein “Fließtext” im Banner darf NICHT wie Forty-Uppercase aussehen */
#banner .content p{
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 1rem;
  line-height: 1.7;
  opacity: .9;
}

/* Falls die kleine Kicker-Zeile ebenfalls betroffen ist */
#banner .content p br{
  display: none;
}

/* Buttons im Banner: nicht so weit rechts “kleben” */
#banner .actions{
  margin-top: 1.1rem;
}

/* Die Trennlinie unter H1 ist ok, aber etwas weniger aggressiv */
#banner header.major > :first-child:after{
  opacity: .35;
}

/* -----------------------
   TILES: Höhe reduzieren (Blockigkeit weg)
   ----------------------- */

.tiles article{
  min-height: 18rem;     /* vorher sehr hoch */
  height: auto;
}

@media (min-width: 981px){
  .tiles article{
    min-height: 20rem;
  }
}

/* Falls Bilder fehlen: Hintergrund etwas ruhiger, damit es nicht “flächig” schreit */
.tiles article:before{
  opacity: .65;
}

/* -----------------------
   SECTIONS (deine IDs) - etwas konsistenter Abstand
   ----------------------- */

section{
  scroll-margin-top: 96px;
}

/* -----------------------
   TABS (Kontakt)
   ----------------------- */

.tabs{
  display:flex;
  gap:.65rem;
  flex-wrap:wrap;
  margin: 0 0 .85rem;
}

.tab{
  border: 1px solid var(--ja-line);
  background: rgba(255,255,255,.04);
  padding: .55rem .85rem;
  border-radius: 999px;
  opacity: .82;
  font-weight: 750;
  cursor: pointer;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .75rem;
}

.tab.is-active{
  opacity: 1;
  border-color: rgba(155, 241, 255, .35);
  background: rgba(155, 241, 255, .10);
}

/* -----------------------
   LEGAL-SEITEN (Impressum etc.)
   ----------------------- */

.legal{
  padding: 3.25rem 0;
}

.legal .inner{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.legal__head{
  margin-bottom: 1.25rem;
}

.legal__card{
  border: 1px solid var(--ja-line);
  border-radius: 8px;
  background: rgba(255,255,255,.03);
  padding: 1.35rem;
}

.legal__divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 1.25rem 0;
}

.legal__item p{
  margin: 0 0 .85rem;
  opacity: .9;
}

/* Links */
.link{
  text-decoration: none;
  border-bottom: 1px dotted rgba(255,255,255,.35);
}

.link:hover{
  border-bottom-color: rgba(155, 241, 255, .55);
}

/* Helfer */
.hidden{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.only-mobile{ display:none; }
@media (max-width: 860px){
  .only-mobile{ display:inline-flex; }
}