/* AIT Group, Startseite: gemeinsames Gestaltungssystem.
   Ein Hintergrund (#EFEFEF), eine Schrift (Inter), eine Inhaltsbreite (max. 1600 px),
   ein Raster mit drei Spalten: links die Bezeichnung, in der Mitte der Inhalt, rechts Links.
   Jede Sektion beginnt mit einer dunklen Linie, jeder Block und jeder Eintrag mit einer hellen.
   Wird nur auf der Startseite geladen, die Unterseiten bleiben unveraendert. */
body.has-hx{
  --ink:#0D1015;
  --ink-2:rgba(13,16,21,.72);
  --ink-3:rgba(13,16,21,.52);
  --ink-4:rgba(13,16,21,.3);
  --rule:rgba(13,16,21,.14);
  --bg:#EFEFEF;
  --violet:#9146E8;
  --font:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  /* Inhaltsbreite: Rand 20 bis 96 px, auf grossen Bildschirmen zentriert auf 1600 px */
  --pad-x:max(clamp(20px,5vw,96px), calc((100% - 1600px) / 2));
  --sec-y:clamp(96px,14vh,168px);
  --cols:minmax(0,3fr) minmax(0,7fr) minmax(0,2fr);
  --col-gap:clamp(24px,3vw,56px);
  --cell:clamp(16px,2.2vh,22px);
  /* Farbvariablen aus site.css auf das neue Konzept legen (Buchungsformular) */
  --cream-50:#0D1015;--cream-100:#232830;--cream-200:#41464F;--cream-300:#6B6F78;--cream-400:#8E9199;
  --line:rgba(13,16,21,.14);--paper:#EFEFEF;--paper-2:#EFEFEF;
  --accent:#9146E8;--accent-hi:#7D35D6;--magenta:#9146E8;--purple-edge:#9146E8;--serif:var(--font);--display:var(--font);
  background:var(--bg);color:var(--ink);
}
html:has(body.has-hx){background:#EFEFEF}
/* Eine Schrift fuer die ganze Startseite (site.css setzt Barlow mit !important) */
body.has-hx,body.has-hx *{font-family:var(--font)!important}
body.has-hx ::selection{background:rgba(145,70,232,.18);color:var(--ink)}

/* ---------- Sektion ---------- */
.sec{position:relative;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;padding-block:var(--sec-y);
  padding-left:max(var(--pad-x),env(safe-area-inset-left,0px));padding-right:max(var(--pad-x),env(safe-area-inset-right,0px))}
.sec *,.sec *::before,.sec *::after{box-sizing:border-box;letter-spacing:0}
/* Grundwerte mit geringem Gewicht, damit jede Klasse sie ueberschreiben kann (site.css setzt p, li, dd auf 17 px) */
:where(.sec) h2,:where(.sec) h3,:where(.sec) p,:where(.sec) ul,:where(.sec) ol,:where(.sec) dl,:where(.sec) dt,:where(.sec) dd,:where(.sec) figure{margin:0;padding:0}
:where(.sec) ul,:where(.sec) ol{list-style:none}
:where(.sec) a{color:inherit;text-decoration:none}
.sec a:focus-visible,.sec button:focus-visible{outline:2px solid var(--violet);outline-offset:4px}
:where(.sec) p,:where(.sec) li,:where(.sec) dd,:where(.sec) dt{font-size:inherit;line-height:inherit}
:where(.sec) p{color:var(--ink-2)}
:where(.sec) b,:where(.sec) strong{font-weight:500;color:var(--ink)}

/* ---------- Sektionskopf: dunkle Linie, Name links, Titel und Text in der Mitte, Link rechts ---------- */
.sx{display:grid;grid-template-columns:var(--cols);grid-template-rows:auto 1fr;column-gap:var(--col-gap);row-gap:14px;align-items:baseline;
  padding-top:var(--cell);border-top:1px solid var(--ink);margin-bottom:clamp(48px,8vh,96px)}
.sx-label{grid-column:1;grid-row:1;font-size:14px;line-height:1.45;font-weight:500;color:var(--ink)}
.sx-body{grid-column:2;grid-row:1/3;min-width:0}
.sx-title{font-size:clamp(30px,min(3.2vw,6.2vh),52px);font-weight:500;line-height:1.08;letter-spacing:-.025em;color:var(--ink);max-width:21em;text-wrap:balance}
.sec .l{display:block;letter-spacing:inherit}
.sx-lead{margin-top:clamp(16px,2.4vh,24px)!important;font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:var(--ink-2);max-width:40em}
.sx-lead b{font-weight:500;color:var(--ink)}
.sx-link{grid-column:3;grid-row:1;justify-self:end}

/* ---------- Bloecke: Bezeichnung links, Inhalt ab der zweiten Spalte ---------- */
.sx-grid{display:grid;grid-template-columns:var(--cols);column-gap:var(--col-gap);row-gap:24px;align-items:start}
.sx-c{grid-column:2/-1;min-width:0}
.sx-block{margin-top:clamp(64px,10vh,120px)}
/* Zelle: jede Bezeichnung und jeder Eintrag beginnt mit einer hellen Linie */
.sx-sub,.cell{padding-top:var(--cell);border-top:1px solid var(--rule)}
.sx-sub{grid-column:1;font-size:14px;line-height:1.45;font-weight:500;color:var(--ink-3)}

/* Eintraege im Raster: Titel und Text */
.ig{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(36px,5.4vh,56px)}
.ig-2{--n:2}.ig-3{--n:3}.ig-4{--n:4}
.it{padding-top:var(--cell);border-top:1px solid var(--rule);min-width:0}
.it h3{font-size:clamp(17px,1.25vw,20px);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--ink);margin-bottom:10px!important}
.it p{font-size:15px;line-height:1.6;color:var(--ink-2)}

/* ---------- Links und Buttons ---------- */
.lk{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:500;line-height:1.3;color:var(--ink);padding-bottom:3px;border-bottom:1px solid currentColor;white-space:nowrap;transition:color 250ms}
.lk span{display:inline-block;transition:transform 250ms}
.lk:hover{color:var(--violet)}
.lk:hover span{transform:translateX(4px)}
.bt{display:inline-flex;align-items:center;gap:14px;background:var(--ink);color:#FFFFFF!important;border-radius:999px;font-size:15px;font-weight:500;line-height:1;padding:16px 26px;white-space:nowrap;transition:background-color 250ms}
.bt svg{width:16px;height:16px;flex:none;transition:transform 250ms}
.bt:hover{background:var(--violet)}
.bt:hover svg{transform:translate(2px,-2px)}

/* Schmaler: der Link wandert unter den Sektionsnamen */
@media (max-width:1100px){
  .sx-body{grid-column:2/-1}
  .sx-link{grid-column:1;grid-row:2;justify-self:start;align-self:start}
  .ig-4{--n:2}
}
/* Handy und Tablet hochkant: Name links, Link rechts, darunter der Titel */
@media (max-width:900px){
  .sx{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:none;row-gap:16px}
  .sx-label{grid-column:1;grid-row:1}
  .sx-link{grid-column:2;grid-row:1;justify-self:end;align-self:baseline}
  .sx-body{grid-column:1/-1;grid-row:2}
  .sx-grid{grid-template-columns:minmax(0,1fr)}
  .sx-sub,.sx-c{grid-column:1}
  .sx-grid{row-gap:14px}
  .sx-sub{padding-top:0;border-top:0}
  .ig-3{--n:2}
}
@media (max-width:600px){
  .ig{--n:1!important;row-gap:28px}
}
@media (max-width:359px){
  .sx{grid-template-columns:minmax(0,1fr)}
  .sx-link{grid-column:1;grid-row:3;justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  .sec *{transition:none!important}
}