/* =====================================================================
   ak Training+Beratung · Startseite v5 "Werkstatt-Manufaktur"
   Shared by /index.html (de) and /en/index.html (en).

   One superfamily: IBM Plex Sans for every heading, sentence, label and
   control (Latin and Cyrillic), IBM Plex Sans Arabic for Arabic. Its capital I
   has serifs and its l a tail, so "KI", "Ihr" and "Il1" never blur.
   Photographs keep their own colour: neutral scrims only where text sits.
   Only the hero photo runs to the viewport edge; every other image sits
   inside the grid with 24px corners. Amber appears in the logo square only.

   Tokens map 1:1 to Elementor Global Colors, Global Fonts and spacing
   variables; the component classes map to Elementor global classes.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  /* colour (WCAG contrast measured in the build report) */
  --navy:#0B2536;          /* structure: dark band, footer, primary button on light */
  --navy-2:#132F45;        /* hover of navy buttons */
  --blue:#1F4E79;          /* links, focus rings, selected states on light */
  --sky:#A9C8E4;           /* links and route on navy */
  --ink:#121D27;           /* all text on light */
  --ink-2:#3F4A55;         /* labels and metadata only */
  --paper:#F7F5F0;         /* default page ground */
  --linen:#EFEAE1;         /* second ground: situation switch, Standorte */
  --white:#FFFFFF;         /* panels, booking sheet, forms */
  --rule:#DCD5C9;          /* 1px rules on paper, linen and white */
  --rule-dark:rgba(255,255,255,.16);  /* 1px rules on navy */
  --on-navy:rgba(255,255,255,.9);     /* running text on navy and on photo scrims */
  --tint:#E8EEF4;          /* hover fill of white controls */
  --scrim:10,14,18;        /* rgb triplet for photo scrims: neutral, never navy */
  --logo-amber:#F7B932;    /* logo square ONLY */

  /* colour option "Blau", the default (section 24 switches to "gruen" or "kontrast" through html[data-theme]).
     The trade colours come from the photographs: workwear blue, fibre teal, landscaping green. */
  --action:#1D4E8F;        /* primary buttons, chat launcher, quick bar (white 8.27:1) */
  --action-hover:#173F78;
  --on-action:#FFFFFF;
  --light-btn:#FFFFFF;     /* buttons on photos and on colour fields */
  --light-btn-hover:var(--tint);
  --light-btn-ink:#1D4E8F;
  --panel:#1D4E8F;         /* colour fields with white text: help card, situation answer, credo, chosen slot */
  --panel-ph:#EAF2FB;      /* placeholders on panels and in the footer (7.1:1) */
  --deep:#173F78;          /* footer and the phone hero (white 10.4:1) */
  --deep-rgb:23,63,120;
  --footer-top:#1D4E8F;     /* upper footer band with the closing call to action (white 8.27:1) */
  --band:#0B6663;          /* booking band (white 6.79:1: no running text on it) */
  --ground:#E7F0FA;        /* situation switch: ink 14.8:1, links 7.5:1 */
  --t1:#1D4E8F;            /* Haustechnik, route start */
  --t2:#0B6663;            /* Systemtechnik, route middle */
  --t3:#2B6340;            /* GaLaBau, route goal (7.09:1 on white) */
  --t1-rgb:22,60,112; --t2-rgb:8,79,76; --t3-rgb:33,77,50;   /* door scrims: each trade colour a step darker */

  /* type: one family for headings and text (both tokens stay, so Elementor keeps two Global Fonts) */
  --font-display:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-ar:"IBM Plex Sans Arabic","IBM Plex Sans",Arial,sans-serif;
  --fs-display:clamp(min(2.75rem,13vw),1.5rem + 3.9vw,5.5rem); /* 44 → 88; under 339px it eases to 13vw (41.6 at 320) so
                                                                   "AI can’t install" still holds one line */
  --fs-h2:clamp(2rem,1.45rem + 1.75vw,3.25rem);        /* 32 → 52 */
  --fs-h3:clamp(1.375rem,1.25rem + .45vw,1.75rem);     /* 22 → 28 */
  --fs-lead:clamp(1.25rem,1.15rem + .35vw,1.4375rem);  /* 20 → 23 */
  --fs-body:1.125rem;      /* 18; 19 from 1280px */
  --fs-small:1rem;         /* 16 */
  --fs-ui:1.0625rem;       /* 17 */

  /* shape */
  --r-xl:24px;             /* photo doors, panels, booking sheet */
  --r-lg:16px;             /* portraits, cards inside panels, drawer tab */
  --r-md:12px;             /* buttons, inputs, slots */
  --shadow-overlay:0 18px 48px rgba(11,37,54,.18);   /* overlays only: menus, Lotse */

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --sec-l:clamp(64px,6.5vw,112px);
  --sec-m:clamp(56px,5.5vw,96px);
  --sec-s:clamp(40px,4vw,64px);
  --container:1600px;
  --gutter:clamp(20px,4.5vw,88px);
  --gap:24px;

  /* header: one row (site.js keeps --hdr-h equal to the real height) */
  --main-h:64px;
  --hdr-h:var(--main-h);
  --qb-h:0px;
}
@media (max-width:699px){:root{--gap:16px;--qb-h:64px}}
@media (min-width:700px){:root{--main-h:72px}}
@media (min-width:1200px){:root{--main-h:76px}}
@media (min-width:1280px){:root{--fs-body:1.1875rem}}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--hdr-h) + 16px);scroll-padding-bottom:calc(var(--qb-h) + 16px);background:var(--paper)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-bottom:calc(var(--qb-h) + env(safe-area-inset-bottom,0px))}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure,address{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-weight:600;text-wrap:balance}
/* No automatic hyphenation: words break only at the ­ set at compound joints. */
h1,h2,h3,p,li,dt,dd,summary,label,a,button{-webkit-hyphens:manual;hyphens:manual}
p,li,dd{text-wrap:pretty;overflow-wrap:break-word}
address{font-style:normal}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
a{color:inherit}
b,strong{font-weight:600}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.dark :focus-visible,.hero :focus-visible,.help :focus-visible,.site-header:not(.is-solid) .hdr :focus-visible{outline-color:var(--white)}
::selection{background:color-mix(in srgb,var(--blue) 24%,#FFFFFF);color:var(--ink)}

/* Arabic (RTL): IBM Plex Sans Arabic for everything (the font tokens switch, so every
   component follows), headings at 1.4, body 20px/1.75, no tracking */
html[lang|=ar]{--font:var(--font-ar);--font-display:var(--font-ar)}
[lang|=ar]{font-family:var(--font-ar);letter-spacing:0}
html[lang|=ar] :is(.t-display,.t-h2,.t-h3){letter-spacing:0;line-height:1.4}
html[lang|=ar] body{font-size:1.25rem;line-height:1.75}
html[lang|=ar] :is(p,li,dd,.t-body){font-size:1.25rem;line-height:1.75}

/* ---------- 3. Type styles (exactly seven; Elementor Global Fonts) ---------- */
.t-display,.t-h2,.t-h3{font-family:var(--font-display);font-weight:600;text-wrap:balance}
.t-display{font-size:var(--fs-display);line-height:1.04;letter-spacing:-.02em}
.t-h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.015em}
.t-h3{font-size:var(--fs-h3);line-height:1.22;letter-spacing:-.005em}
.t-lead{font-size:var(--fs-lead);font-weight:400;line-height:1.5;letter-spacing:0}
.t-body{font-size:var(--fs-body);font-weight:400;line-height:1.6;letter-spacing:0}
.t-small{font-size:var(--fs-small);font-weight:400;line-height:1.5;letter-spacing:0}
.t-ui{font-size:var(--fs-ui);font-weight:600;line-height:1.2;letter-spacing:0}

/* ---------- 4. Grid: 12 columns, two axes (A = column 1, B = column 7) ---------- */
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
@media (max-width:699px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- 5. Utilities ---------- */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nw{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums lining-nums}
.i{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.i-20{width:20px;height:20px;stroke-width:1.9}
[dir=rtl] .i-dir{transform:scaleX(-1)}
/* Placeholder for content the client still has to deliver */
.ph{color:var(--ink-2);text-decoration:underline dashed 1px;text-underline-offset:4px;text-decoration-skip-ink:none}
:is(.dark,.hero,.door) .ph{color:var(--sky)}
.help .ph{color:var(--panel-ph)}
.skip{position:absolute;inset-inline-start:16px;top:-120px;z-index:100;padding:12px 16px;border-radius:var(--r-md);background:var(--white);color:var(--navy);font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* ---------- 6. Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 28px;border:0;border-radius:var(--r-md);font-family:var(--font);font-size:var(--fs-ui);font-weight:600;line-height:1.2;text-align:center;text-decoration:none;white-space:normal;text-wrap:balance;cursor:pointer;transition:background-color .2s,color .2s}
.btn-navy{background:var(--action);color:var(--on-action)}
.btn-navy:hover{background:var(--action-hover)}
.btn-white{background:var(--light-btn);color:var(--light-btn-ink)}
.btn-white:hover{background:var(--light-btn-hover)}
@media (max-width:399px){.btn{width:100%}}

.link{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(31,78,121,.45);transition:color .2s,text-decoration-color .2s}
.link:hover{text-decoration-color:currentColor}
.dark .link{color:var(--sky);text-decoration-color:rgba(169,200,228,.5)}
.dark .link:hover{color:var(--white);text-decoration-color:currentColor}

/* Arrow link: underlined words, bare arrow kept with the last word (nowrap span) */
.arrow{color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(31,78,121,.4);transition:color .2s,text-decoration-color .2s}
.arrow .i{display:inline-block;margin-inline-start:6px;vertical-align:-4px;transition:translate .2s ease}
.arrow:hover{text-decoration-color:currentColor}
.arrow:hover .i{translate:3px 0}
[dir=rtl] .arrow:hover .i{translate:-3px 0}
.dark .arrow{color:var(--sky);text-decoration-color:rgba(169,200,228,.45)}
.dark .arrow:hover{color:var(--white);text-decoration-color:currentColor}
.text-btn{display:inline-block;min-height:48px;padding:10px 0;border:0;background:none;color:var(--blue);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(31,78,121,.4);cursor:pointer;transition:color .2s,text-decoration-color .2s}
.text-btn:hover{text-decoration-color:currentColor}

/* ---------- 7. Prototype bar (not site content) ---------- */
.proto{background:var(--ink);color:rgba(255,255,255,.88);font-size:14px;line-height:1.4}
.proto .wrap{padding-block:7px}
.proto b{color:var(--white);font-weight:600}
@media (max-width:699px){.proto-more{display:none}}
/* prototype only: the colour options the client compares (section 24) */
.proto-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px}
.proto-themes{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.proto-themes > span{margin-inline-end:4px}
.proto-themes button{display:inline-flex;align-items:center;gap:7px;min-height:30px;padding:0 11px 0 8px;border:1px solid rgba(255,255,255,.3);border-radius:8px;background:none;color:inherit;font:inherit;cursor:pointer}
.proto-themes button:hover{border-color:rgba(255,255,255,.75)}
.proto-themes button[aria-pressed="true"]{border-color:var(--white);background:var(--white);color:var(--ink)}
.proto-themes :focus-visible{outline-color:var(--white)}
.proto-sw{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.65)}
[data-theme-set="blau"] .proto-sw{background:#1D4E8F}
[data-theme-set="gruen"] .proto-sw{background:#006B52}
[data-theme-set="modern"] .proto-sw{background:linear-gradient(135deg,#0E1A3D 50%,#2449E8 50%)}
@media (max-width:399px){.proto-themes > span{display:none}}
/* phones: one slim line ("Prototyp." and the switch); each form says on sending that nothing was sent */
@media (max-width:699px){
  .proto-note{display:none}
  .proto-row{gap:6px 12px}
  .proto-themes button{gap:6px;padding:0 9px 0 7px}
}

/* ---------- 8. Header: one row ---------- */
/* logo · the five topics ··· Kursfinder · language · Login · Kontakt · button. The logo and the topics stand together
   on the left, the quiet tools on the right. Vermittler and Unternehmen live in the Förderung menu, the chat in the
   drawer and the footer. Below 1200: logo ··· search · Login · language · burger. */
.site-header{position:sticky;top:0;z-index:40;color:var(--white);border-bottom:1px solid transparent;transition:background-color .2s,color .2s,border-color .2s}
.site-header.is-solid{background:var(--paper);color:var(--ink);border-bottom-color:var(--rule)}
.hdr{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto auto;grid-template-rows:var(--main-h);grid-template-areas:"logo . kf login lang menu";align-items:center;white-space:nowrap}
.lang{grid-area:lang}
.logo{grid-area:logo;display:flex;align-items:center;gap:12px;flex:none;color:inherit;text-decoration:none;direction:ltr;unicode-bidi:isolate}
.logo-mark{display:grid;place-items:center;width:44px;height:44px;padding-bottom:4px;background:var(--logo-amber);color:#FFFFFF;font:600 27px/1 "Bodoni Moda",Georgia,serif;letter-spacing:-.04em}
.logo-text{font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.14em;text-transform:uppercase}
/* Kursfinder is a quiet tool like the language switch: the magnifier with its label where the row has room */
.kf{grid-area:kf;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;padding:0;color:inherit;font-size:var(--fs-ui);font-weight:500;line-height:1.2;text-decoration:none}
.kf-label{display:none}
.kf:hover .kf-label,.hdr-kontakt:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.hdr .nav,.hdr .hdr-kontakt,.hdr .btn-hdr{display:none}
.nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:0 22px}
.nav-link{display:inline-flex;align-items:center;gap:4px;min-height:48px;padding:0;border:0;background:none;color:inherit;font-family:var(--font);font-size:var(--fs-ui);font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer}
.nav-link .i{transition:transform .2s}
.nav-link[aria-expanded="true"] .i{transform:rotate(180deg)}
.tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0;border:0;background:none;color:inherit;font-family:var(--font);font-size:var(--fs-ui);font-weight:500;line-height:1.2;text-decoration:none;cursor:pointer}
.lang-btn:hover .lang-code{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.lang-btn .i-chev{transition:transform .2s}
.lang-btn[aria-expanded="true"] .i-chev{transform:rotate(180deg)}
.menu-btn{grid-area:menu;margin-inline-end:-10px}
/* Login is a bare person icon, as on the DEKRA Akademie site the client likes ("das Männchen oben für den Login") */
.login{grid-area:login}
@media (max-width:359px){.hdr .login{display:none}}   /* 320: no room beside search, language and menu; Login stays in the drawer */
.menu-btn .i-close{display:none}
.menu-btn[aria-expanded="true"] .i-close{display:block}
.menu-btn[aria-expanded="true"] .i-menu{display:none}
@media (max-width:699px){
  .logo{gap:8px}
  .logo-mark{width:40px;height:40px;font-size:25px}
  .lang-btn .i-chev{display:none}
}
@media (min-width:1200px){
  .hdr{grid-template-columns:auto minmax(0,1fr) auto auto auto auto auto;grid-template-areas:"logo nav kf lang login kont btn"}
  .hdr .nav{grid-area:nav;display:block;min-width:0;margin-inline-start:40px}
  /* every topic is as tall as the bar, so the mouse slides from it straight into its panel. A bar grows under the
     topic on hover and stays while its panel is open: white over the photo, the action colour on the solid header */
  .nav .nav-link{position:relative;min-height:var(--main-h)}
  .nav .nav-link::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;border-radius:3px 3px 0 0;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .25s cubic-bezier(.65,0,.25,1)}
  [dir=rtl] .nav .nav-link::after{transform-origin:right center}
  .is-solid .nav .nav-link::after{background:var(--action)}
  .nav .nav-link:hover::after,.nav .nav-link[aria-expanded="true"]::after{transform:scaleX(1)}
  /* the keyboard ring hugs the label, not the whole bar-tall item */
  .nav .nav-link:focus-visible{outline:none}
  .nav .nav-link:focus-visible::before{content:"";position:absolute;inset:calc(50% - 22px) -10px;border-radius:var(--r-md);outline:3px solid var(--blue)}
  .site-header:not(.is-solid) .nav .nav-link:focus-visible::before{outline-color:var(--white)}
  .lang-btn{gap:5px;min-height:48px}
  .kf{margin-inline-end:8px}
  .hdr .hdr-kontakt{grid-area:kont;display:inline-flex;margin-inline:20px 24px}
  .hdr .btn-hdr{grid-area:btn;display:inline-flex;min-height:48px;padding:0 22px}
  .site-header:not(.is-solid) .btn-hdr{background:var(--light-btn);color:var(--light-btn-ink)}
  .site-header:not(.is-solid) .btn-hdr:hover{background:var(--light-btn-hover)}
  .menu-btn{display:none}
  .kf-label{display:inline}
}
@media (min-width:1200px) and (prefers-reduced-motion:reduce){.nav .nav-link::after{transition:none}}
/* At full spacing the German row needs about 1480px. Narrower screens tighten it step by step, so the topics never
   wrap and at least 32px stay between the topics and the tools: 1200–1599 the language switch without its chevron
   (the globe and "DE" carry it) and topics 18px apart; below 1440 (English: below 1366) the magnifier alone stands
   for Kursfinder (its aria-label names it); 1200–1365 German closes up topics, Kontakt and button; 1200–1279 the bare
   globe switches the language and Login stays in the footer */
@media (min-width:1200px) and (max-width:1599px){
  .nav-list{gap:0 18px}
  .lang-btn .i-chev{display:none}
}
@media (min-width:1200px) and (max-width:1439px){
  :root:not([lang="en"]) .kf-label{display:none}
  :root:not([lang="en"]) .kf{margin-inline-end:4px}
}
@media (min-width:1200px) and (max-width:1365px){
  .kf-label{display:none}
  .kf{margin-inline-end:4px}
  :root:not([lang="en"]) .hdr .nav{margin-inline-start:28px}
  :root:not([lang="en"]) .nav-list{gap:0 12px}
  :root:not([lang="en"]) .hdr .hdr-kontakt{margin-inline:14px 18px}
  :root:not([lang="en"]) .hdr .btn-hdr{padding:0 16px}
}
@media (min-width:1200px) and (max-width:1279px){
  .hdr .login{display:none}
  .lang-code{display:none}
  :root:not([lang="en"]) .kf{margin-inline-end:0}
  :root:not([lang="en"]) .hdr .nav{margin-inline-start:16px}
  :root:not([lang="en"]) .nav-list{gap:0 12px}
  :root:not([lang="en"]) .hdr .hdr-kontakt{margin-inline:12px 14px}
  :root:not([lang="en"]) .hdr .btn-hdr{padding:0 14px}
}
@media (min-width:1600px){
  .hdr .nav{margin-inline-start:48px}
  .nav-list{gap:0 30px}
}

/* Language menu and mega menus: inline panels, not modals */
.lang{position:relative}
.lang-menu{position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:3;min-width:248px;padding:8px 0;background:var(--white);color:var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow-overlay);white-space:normal}
.lang-menu li{display:flex;align-items:center;min-height:48px;padding:0 24px}
.lang-menu a{display:flex;align-items:center;align-self:stretch;flex:1;font-size:var(--fs-ui);font-weight:500;line-height:1.2;text-decoration:none}
.lang-menu a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.lang-menu a[aria-current="true"]{font-weight:600}
.lang-menu .ph{font-size:var(--fs-small)}
.mega{position:absolute;inset-inline:0;top:100%;background:var(--white);color:var(--ink);border-top:1px solid var(--rule);box-shadow:var(--shadow-overlay);white-space:normal}
/* panels fade in and settle 6px down; moving from topic to topic swaps the panel at once */
@media (prefers-reduced-motion:no-preference){.mega:not(.is-switch),.lang-menu{animation:menu-in .22s cubic-bezier(.2,.7,.2,1)}}
@keyframes menu-in{from{opacity:0;translate:0 -6px}}
.mega-grid{padding-block:48px 56px;row-gap:32px}
.mega-col{grid-column:span 3}
.mega-h{margin-bottom:16px;font-weight:600;color:var(--ink-2)}
.mega-links{display:grid;gap:14px}
.mega-links a{font-size:var(--fs-ui);font-weight:500;line-height:1.3;text-decoration:none}
.mega-links a:hover,.mega-starts a:hover .mega-date{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.mega-note{margin-top:12px;color:var(--ink-2)}
.mega-starts{display:grid;gap:16px}
.mega-starts a{display:grid;gap:2px;text-decoration:none}
.mega-starts .t-small{color:var(--ink-2)}
.mega-date{font-size:var(--fs-ui);font-weight:600;line-height:1.35;font-variant-numeric:tabular-nums lining-nums}
.mega-intro{grid-column:1 / span 5}
.mega-intro p + p{margin-top:12px;max-width:30rem}
.mega-sits{grid-column:7 / -1;border-top:1px solid var(--rule)}
.mega-sits a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:var(--fs-ui);font-weight:500;line-height:1.35;text-decoration:none}
.mega-sits a:hover span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.mega-sits .i{color:var(--blue);transition:translate .2s}
.mega-sits a:hover .i{translate:3px 0}

/* Mobile drawer (below 1200): everything, Vermittler, Unternehmen, chat and Login included */
.drawer{position:fixed;inset-inline:0;bottom:0;top:var(--hdr-h);z-index:39;overflow:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink)}
.drawer-inner{padding-block:8px 48px}
.drawer details{border-bottom:1px solid var(--rule)}
.drawer summary{display:flex;align-items:center;justify-content:space-between;min-height:64px;font-weight:500;cursor:pointer;list-style:none}
.drawer summary::-webkit-details-marker{display:none}
.drawer summary .i{color:var(--blue);transition:transform .2s}
.drawer details[open] summary .i{transform:rotate(180deg)}
.drawer details ul{display:grid;padding-bottom:16px}
.drawer details a{display:flex;align-items:center;min-height:48px;padding-block:8px;line-height:1.35;text-decoration:none}
.drawer details a:hover,.drawer-link:hover,.drawer-util a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.drawer-link{display:flex;align-items:center;min-height:64px;border-bottom:1px solid var(--rule);font-weight:500;text-decoration:none}
.drawer .btn{width:100%;margin-top:32px}
.drawer-util{display:grid;margin-top:24px}
.drawer-util a,.drawer-chat{display:flex;align-items:center;min-height:48px;color:var(--ink);text-decoration:none}
.drawer-chat{width:100%;padding:0;border:0;background:none;font:inherit;text-align:start;cursor:pointer}
.drawer-chat:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.drawer-langs{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 24px;padding-top:16px;border-top:1px solid var(--rule);margin-top:16px}
.drawer-langs a{display:inline-flex;align-items:center;min-height:44px;color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.drawer-langs a[aria-current="true"]{color:var(--ink);font-weight:600;text-decoration:none}

/* ---------- 9. S1 Hero: the photograph keeps its own colour ---------- */
/* Only three things on the photo: the headline, one short lead line and the actions. The wow comes from the photo,
   the headline and the space around them. The hero fills the screen (up to 920px); the text block sits centred in the
   space below the header, a little above the optical centre. */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;min-height:min(100svh,920px);margin-top:calc(-1 * var(--hdr-h) - 1px);padding-top:var(--hdr-h);overflow:hidden;background:#1B1E21;color:var(--white)}
.hero-media{position:absolute;inset:0;z-index:-1}
/* the photo is mirrored so the glove and fitting sit right of the text; object-position refers to the unmirrored photo */
.hero-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:0% 44%;transform:scaleX(-1)}
/* neutral, directional scrim: dark only behind the text block, so the right half of the photo shows itself;
   the top fade carries the transparent header */
.hero-media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(var(--scrim),.5) 0,rgba(var(--scrim),0) 180px),
  linear-gradient(90deg,rgba(var(--scrim),.8) 0%,rgba(var(--scrim),.72) 28%,rgba(var(--scrim),.5) 42%,rgba(var(--scrim),.18) 56%,rgba(var(--scrim),0) 68%),
  linear-gradient(0deg,rgba(var(--scrim),.24) 0,rgba(var(--scrim),0) 200px)}
[dir=rtl] .hero-img{transform:none}
[dir=rtl] .hero-media::after{background:
  linear-gradient(180deg,rgba(var(--scrim),.5) 0,rgba(var(--scrim),0) 180px),
  linear-gradient(270deg,rgba(var(--scrim),.8) 0%,rgba(var(--scrim),.72) 28%,rgba(var(--scrim),.5) 42%,rgba(var(--scrim),.18) 56%,rgba(var(--scrim),0) 68%),
  linear-gradient(0deg,rgba(var(--scrim),.24) 0,rgba(var(--scrim),0) 200px)}
.hero-inner{width:100%;padding-block:48px 64px}
.hero-text{grid-column:1 / span 8;display:flex;flex-direction:column;align-items:flex-start}
/* one sentence per line (what we teach / who pays); where the second needs two lines they are balanced, so no
   short tail ("for it.", "bezahlen.") ever hangs alone */
.hero-lead{margin-top:24px;max-width:34rem;color:var(--on-navy)}
.hero-lead > span{display:block;text-wrap:balance}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:40px}
.hero-call{display:inline-flex;align-items:center;gap:10px;min-height:48px;color:var(--white);text-decoration:none}
.hero-call > span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.45);transition:text-decoration-color .2s}
.hero-call:hover > span{text-decoration-color:var(--white)}
/* desktop: centred below the header, lifted a little (the bottom padding is larger than the top) */
@media (min-width:1100px){.hero-inner{padding-block:40px 120px}}
/* the lead breaks after its first sentence (what we teach / who pays); from 1100 the second sentence holds one line */
@media (min-width:1100px){.hero-lead{max-width:40rem}}
@media (min-width:1200px){.hero-text{grid-column:1 / span 7}}
/* 700–1199: a narrower lead stays left of the fitting */
@media (min-width:700px) and (max-width:1199px){.hero-lead{max-width:30rem}}
/* Phones and portrait tablets: photo on top, text on --deep below the fade */
@media (max-width:699px),(max-width:1199px) and (max-aspect-ratio:4/5){
  .hero{display:block;min-height:0;padding-top:0;background:var(--deep)}
  .hero-media{position:relative;inset:auto;z-index:0;height:clamp(240px,calc(100svh - 430px),460px)}
  .hero-img{object-position:0% 46%}
  .hero-media::after,[dir=rtl] .hero-media::after{background:
    linear-gradient(180deg,rgba(var(--scrim),.55) 0,rgba(var(--scrim),0) 120px),
    linear-gradient(0deg,var(--deep) 0,rgba(var(--deep-rgb),.9) 16%,rgba(var(--deep-rgb),.35) 40%,rgba(var(--deep-rgb),0) 60%)}
  .hero-inner{position:relative;margin-top:-52px;padding-block:0 48px}
  .hero-text{grid-column:1 / -1}
  .hero-lead{margin-top:16px}
  .hero-actions{margin-top:24px}
}
@media (min-width:700px) and (max-width:1199px) and (max-aspect-ratio:4/5){
  .hero-media{height:50svh}
  .hero-text{grid-column:1 / span 10}
}
/* Headline breaks. Wide: "Eine KI baut / keine Heizung ein. / Sie schon." Line 2 needs 358px at 44px (English
   "install a radiator." 327px), so below 410px (370px of line, room for Safari's metrics) the forced break goes and the
   word pairs held together in the markup wrap instead: "Eine KI / baut keine / Heizung ein." and
   "AI can’t install / a radiator." No line ever holds a single word. */
.hero h1 .pair{white-space:nowrap}
@media (max-width:409px){.br-wide{display:none}}
/* Phones: the button and the phone line stack under the headline.
   Short phones (under 740px): the button follows the headline so it sits in the first screen, above the quick bar. */
@media (max-width:699px){
  .hero h1{text-wrap:balance}
  .hero-actions{display:contents}
  .hero-actions .btn{order:2;align-self:stretch;margin-top:24px}
  .hero-call{order:3;margin-top:8px}
  .hero-lead{order:4;margin-top:20px}
}
/* Phones 740px and taller: headline, lead, button, so what we teach and who can pay is in the first screen */
@media (max-width:699px) and (min-height:740px){
  .hero-media{height:clamp(200px,calc(100svh - 500px),420px)}
  .hero-lead{order:1;margin-top:16px}
}

/* ---------- 10. S2 Kurse: photo doors (they start below the hero, no overlap) ---------- */
.kurse{position:relative;z-index:2;padding-block:var(--sec-s) var(--sec-m)}
.doors{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap)}
.door{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;aspect-ratio:4/5;padding:28px 24px;overflow:hidden;border-radius:var(--r-xl);background:#30353A;color:var(--white)}
.door > img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .5s ease}
/* bottom scrim in the course's trade colour (a dark shade of it): Haustechnik workwear blue, Systemtechnik fibre teal,
   Garten- und Landschaftsbau green. The photo keeps its own colour above the text. */
.door{--trade:var(--t1-rgb);--shade-top:34%;--shade-mid:.62;--shade-end:.92}
.door-sys{--trade:var(--t2-rgb);--shade-top:26%;--shade-mid:.72;--shade-end:.94}
.door-gala{--trade:var(--t3-rgb)}
.door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--trade),0) var(--shade-top),rgba(var(--trade),var(--shade-mid)) 62%,rgba(var(--trade),var(--shade-end)) 100%);pointer-events:none}
.door-haus > img{object-position:44% 30%}
.door-sys > img{object-position:42% 50%}
.door-gala > img{object-position:50% 46%}
.door-title{max-width:16em;color:var(--white)}
.door-link{color:inherit;text-decoration:none}
.door-link::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
/* focus: the whole door gets the ring (3px white + 3px navy); without :has() the link keeps its own outline */
.door:has(.door-link:focus-visible){outline:3px solid var(--navy);outline-offset:3px;box-shadow:0 0 0 3px var(--white)}
@supports selector(:has(*)){.door-link:focus-visible{outline:none}}
.door-arrow{display:inline-block;width:24px;height:24px;margin-inline-start:10px;vertical-align:-3px;stroke-width:1.8;transition:translate .2s ease}
.door:hover > img{transform:scale(1.03)}
.door:hover .door-arrow{translate:4px 0}
[dir=rtl] .door:hover .door-arrow{translate:-4px 0}
.door-facts{max-width:34rem;margin-top:8px;color:var(--white);font-size:var(--fs-body);line-height:1.5;font-variant-numeric:tabular-nums lining-nums}
.door-facts + .door-facts{margin-top:2px}
/* wide doors: the places of a start date stay together on their own line */
@media (min-width:1100px){.door-where{white-space:nowrap}}
/* Below 1100 (phones and tablets) the scrim belongs to the text block, not to the door: it starts 120px above the
   title and is dense under every line, so it rises with the text in any language and at any width.
   From 1100 the doors are wide and each photo keeps its own tuned door scrim (--shade-*). */
@media (max-width:1099px){
  .door::after{display:none}
  .door-body{margin:-120px -32px -32px;padding:120px 32px 32px;background:linear-gradient(180deg,rgba(var(--trade),0) 0,rgba(var(--trade),.5) 60px,rgba(var(--trade),.74) 120px,rgba(var(--trade),.92) 100%)}
}
@media (max-width:699px){
  /* 4:5 is the minimum: a clipping box with aspect-ratio would not grow, so a long text block would lose its first line */
  .door{aspect-ratio:auto;min-height:calc((100vw - 2 * var(--gutter)) * 1.05)}
  .door-body{margin:-120px -24px -28px;padding:120px 24px 28px}
}
/* help card: the first human step beside the doors */
.help{display:flex;flex-direction:column;align-items:flex-start;padding:32px 24px;border-radius:var(--r-xl);background:var(--panel);color:var(--white)}
.help .t-h3{max-width:13em}
.help-text{margin-top:12px;margin-bottom:28px;max-width:26rem;color:var(--white)}
/* real data instead of empty navy: the next free appointment (Microsoft Bookings in production) and the phone hours */
.help-next{width:100%;margin-top:auto;padding-top:24px;border-top:1px solid var(--rule-dark)}
.help-next-label,.help-next-hours{color:var(--white)}
.help-next-date{margin-top:2px;font-weight:600;color:var(--white);font-variant-numeric:tabular-nums lining-nums}
.help-next-hours{margin-top:4px}
.help-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:auto;padding-top:32px}
.help-next:not([hidden]) + .help-actions{margin-top:0;padding-top:24px}
.help-call{display:inline-block;padding-block:12px;color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:rgba(255,255,255,.45)}
.help-call:hover{text-decoration-color:var(--white)}
.help-call .nw{font-weight:600}
/* links under the doors; then the proofs as one white strip and the language line under it */
.kurse-more{row-gap:12px;margin-top:40px}
.kurse-more-a,.kurse-more-b,.kurse-meta{grid-column:1 / -1}
.kurse-more-b{display:grid;gap:4px}
.kurse-more .arrow{display:inline-block;padding-block:8px;text-wrap:balance}
.kurse-meta{display:grid;grid-template-columns:minmax(0,1fr);gap:20px var(--gap);margin-top:40px}
.kurse-langs{color:var(--ink)}
.kurse-langs a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(31,78,121,.45);transition:text-decoration-color .2s}
.kurse-langs a:hover{text-decoration-color:currentColor}
@media (min-width:700px){
  .doors{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(400px,auto)}
  .door,.help{aspect-ratio:auto;padding:32px}
  /* 700–899: two equal halves, so no title has to squeeze into a narrow door */
  .door-haus,.door-sys,.help,.door-gala{grid-column:span 6}
  .kurse-more-a{grid-column:1 / span 6}
  .kurse-more-b{grid-column:7 / -1}
}
@media (min-width:900px){
  /* the mirrored grid: wide · narrow / narrow · wide */
  .door-haus{grid-column:1 / span 7}
  .door-sys{grid-column:8 / span 5}
  .help{grid-column:1 / span 5}
  .door-gala{grid-column:6 / span 7}
}
@media (min-width:1000px){
  /* three links in one row, set in the lead size */
  .kurse-more-a{grid-column:1 / span 4}
  .kurse-more-b{grid-column:5 / -1;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap)}
  .kurse-more .arrow{font-size:var(--fs-lead)}
  .kurse-meta{grid-template-columns:repeat(12,minmax(0,1fr))}
}
@media (min-width:1100px){
  .doors{grid-auto-rows:minmax(440px,auto)}
  .help{padding:40px}
}
@media (min-width:1280px){.doors{grid-auto-rows:minmax(480px,auto)}}

/* ---------- 11. Shared section heads ---------- */
.sec-head{grid-column:1 / -1}
.sec-head .t-lead{margin-top:16px;max-width:34rem}
@media (min-width:1000px){.sec-head{grid-column:1 / span 8}}

/* ---------- 12. S3 Wer bezahlt: situation switch with a drawer ---------- */
/* light ground (--ground); the answer is a panel-coloured field and the chosen row opens into it like a drawer */
.situation{background:var(--ground);padding-block:var(--sec-m)}
.sw{grid-column:1 / -1;margin-top:40px;border-bottom:1px solid var(--rule)}
.sw-h{position:relative;border-top:1px solid var(--rule);font-size:inherit;font-weight:inherit}
.sw-btn{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:64px;padding:18px 0;border:0;background:none;color:var(--ink);font-family:var(--font);font-size:var(--fs-lead);font-weight:500;line-height:1.45;text-align:start;cursor:pointer;transition:color .2s}
.sw-btn:hover .sw-label{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
/* every row is .t-lead 500; the chosen one turns white and takes the panel-coloured drawer (no weight change, so the
   line breaks of a row never change when it is chosen) */
.sw-btn[aria-expanded="true"]{color:var(--white)}
.sw-btn[aria-expanded="true"] .i{color:var(--white)}
.sw-btn[aria-expanded="true"]:focus-visible,.sw-p :focus-visible{outline-color:var(--white)}
.sw-btn .i{flex:none;color:var(--blue)}
.sw-arrow{display:none}
.sw-chev{transition:transform .2s}
.sw-btn[aria-expanded="true"] .sw-chev{transform:rotate(180deg)}
.sw-p{position:relative;padding:4px 0 28px}
.sw-p{color:var(--white)}
.sw-p > .t-h3{color:var(--white)}
.sw-p .ph{color:var(--panel-ph)}
.sw-p .arrow{color:var(--white);text-decoration-color:rgba(255,255,255,.55)}
.sw-p .arrow:hover{text-decoration-color:currentColor}
.sw-p p:not(.t-h3){margin-top:12px;max-width:36rem}
.sw-p .arrow{display:inline-block;margin-top:16px;padding-block:8px}
.sw-more{grid-column:1 / -1;margin-top:40px}
/* phones and tablets: an accordion, the open row and its answer are one white shape */
@media (max-width:999px){
  .sw-h.is-open{border-top-color:transparent}
  .sw-h.is-open::before{content:"";position:absolute;inset:-1px -12px 0;z-index:-1;background:var(--panel);border-radius:var(--r-lg) var(--r-lg) 0 0}
  .sw-h.is-open + .sw-p{margin-inline:-12px;padding:0 12px 28px;background:var(--panel);border-radius:0 0 var(--r-lg) var(--r-lg)}
  .sw-h.is-open + .sw-p + .sw-h{border-top-color:transparent}
  .sw-h:has(+ .sw-p:not([hidden])):last-of-type{border-bottom:0}
  .sw:has(.sw-h:last-of-type.is-open){border-bottom-color:transparent}
  .sw-h{isolation:isolate}
}
@media (min-width:1000px){
  .sw{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(6,auto) 1fr;column-gap:var(--gap);align-items:start;margin-top:48px;border-bottom:0}
  .sw-h{grid-column:1 / span 5;isolation:isolate}
  .sw-h:nth-of-type(1){grid-row:1}
  .sw-h:nth-of-type(2){grid-row:2}
  .sw-h:nth-of-type(3){grid-row:3}
  .sw-h:nth-of-type(4){grid-row:4}
  .sw-h:nth-of-type(5){grid-row:5}
  .sw-h:nth-of-type(6){grid-row:6;border-bottom:1px solid var(--rule)}
  .sw-btn{position:static;min-height:68px;padding:19px 0}
  /* one weight in both states, so choosing a row never reflows the list */
  .sw-label{max-width:21em;text-wrap:balance}
  /* the arrow keeps one 24px box in both states (drawn at 20px until chosen), so the label never loses width */
  .sw-arrow{display:block;width:24px;height:24px;stroke-width:1.8;scale:.84;color:var(--ink-2);opacity:.55;transition:translate .2s,opacity .2s}
  .sw-btn:hover .sw-arrow{opacity:1;translate:3px 0}
  [dir=rtl] .sw-btn:hover .sw-arrow{translate:-3px 0}
  .sw-chev{display:none}
  .sw-btn[aria-expanded="true"]{cursor:default}
  .sw-btn[aria-expanded="true"] .sw-label{text-decoration:none}
  .sw-btn[aria-expanded="true"] .sw-arrow{stroke-width:1.7;scale:1;color:var(--white);opacity:1;translate:none}
  /* the answer panel: height follows its content; it slides down to meet the chosen row (site.js); sticky while the list scrolls */
  .sw-p{grid-column:6 / -1;grid-row:1 / -1;align-self:start;position:sticky;top:calc(var(--hdr-h) + 24px);margin-top:var(--sw-shift,0px);min-height:var(--sw-reach,0px);padding:clamp(36px,3.4vw,52px);background:var(--panel);border-radius:var(--r-xl)}
  .sw-p > .t-h3{max-width:20em}
  .sw-p p:not(.t-h3){margin-top:16px}
  .sw-p .arrow{margin-top:16px}
  /* the drawer: the chosen row takes the panel's surface and bridges the gap */
  .sw-h.is-open{z-index:1;border-top-color:transparent}
  .sw-h.is-open + .sw-p + .sw-h{border-top-color:transparent}
  .sw-h.is-open:nth-of-type(6){border-bottom-color:transparent}
  .sw-h.is-open::before{content:"";position:absolute;z-index:-1;top:-1px;bottom:0;inset-inline-start:-24px;inset-inline-end:calc(-1 * var(--gap) - 2px);background:var(--panel);border-start-start-radius:var(--r-lg);border-end-start-radius:var(--r-lg)}
  .sw-h.is-open:nth-of-type(6)::before{bottom:-1px}
  /* concave fillets where the drawer meets the panel */
  .sw-h.is-open .sw-btn::before,.sw-h.is-open .sw-btn::after{content:"";position:absolute;inset-inline-end:calc(-1 * var(--gap));width:var(--r-lg);height:var(--r-lg);pointer-events:none}
  .sw-h.is-open .sw-btn::before{bottom:calc(100% + 1px);background:radial-gradient(circle at 0 0,transparent calc(var(--r-lg) - .5px),var(--panel) var(--r-lg))}
  .sw-h.is-open .sw-btn::after{top:100%;background:radial-gradient(circle at 0 100%,transparent calc(var(--r-lg) - .5px),var(--panel) var(--r-lg))}
  [dir=rtl] .sw-h.is-open .sw-btn::before{background:radial-gradient(circle at 100% 0,transparent calc(var(--r-lg) - .5px),var(--panel) var(--r-lg))}
  [dir=rtl] .sw-h.is-open .sw-btn::after{background:radial-gradient(circle at 100% 100%,transparent calc(var(--r-lg) - .5px),var(--panel) var(--r-lg))}
  .sw.joint-top .sw-h.is-open .sw-btn::before,.sw.joint-bottom .sw-h.is-open .sw-btn::after{display:none}
  .sw.joint-top .sw-p{border-start-start-radius:0}
  .sw.joint-bottom .sw-p{border-end-start-radius:0}
}

/* ---------- 13. S4 Weg: the route drawn like a pipe run on an installation plan ---------- */
/* White ground. Each stop has a junction point in its trade colour: --t1 at the start, --t2 in the middle,
   --t3 at the goal. Phones and tablets: one vertical line. From 1100px the five stops stand side by side, every
   second one lower, and site.js draws one pipe line through the junctions with rounded bends in the gaps. */
.weg{background:var(--white);padding-block:var(--sec-m)}
.weg-grid{row-gap:40px}
.weg-head{grid-column:1 / -1}
.weg-lead{margin-top:16px;max-width:30rem}
.route{--node:30px;--rail:48px;position:relative;grid-column:1 / -1;padding-inline-start:var(--rail)}
.stop{--c:var(--t1);--seg:var(--t1);position:relative;padding-bottom:36px}
.stop:nth-of-type(2){--seg:var(--t2)}
.stop:nth-of-type(3){--c:var(--t2);--seg:var(--t2)}
.stop:nth-of-type(4){--c:var(--t2);--seg:var(--t3)}
.stop:nth-of-type(5){--c:var(--t3)}
.stop:last-of-type{padding-bottom:0}
.stop-node{position:absolute;z-index:1;inset-inline-start:calc(-1 * var(--rail));top:calc(var(--fs-h3) * .62 - var(--node) / 2);width:var(--node);height:var(--node);border:6px solid var(--c);border-radius:50%;background:var(--white)}
.stop.is-here .stop-node{background:var(--c);box-shadow:inset 0 0 0 5px var(--white)}
.stop.is-goal .stop-node{--node:38px;background:var(--c);box-shadow:inset 0 0 0 6px var(--white)}
/* the pipe between two junctions (vertical layout) */
.stop:not(:last-of-type)::after{content:"";position:absolute;inset-inline-start:calc(-1 * var(--rail) + var(--node) / 2 - 4px);top:calc(var(--fs-h3) * .62);width:8px;height:100%;border-radius:4px;background:var(--seg)}
.stop-name{color:var(--ink)}
.stop-tag{margin-top:2px;font-weight:600;color:var(--c)}
.stop-text{margin-top:8px;max-width:34rem}
.route-note{grid-column:1 / -1;margin-top:8px}
.route-line{position:absolute;inset:0;z-index:0;overflow:visible;pointer-events:none;fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1000px){.weg-head{grid-column:1 / span 7}}
@media (min-width:1100px){
  /* five stops side by side; every second one sits lower, so the line bends like a pipe between them */
  .route{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--gap);align-items:start;padding-inline-start:0;margin-top:40px}
  .stop{padding:0}
  .stop:nth-of-type(even){margin-top:88px}
  .stop:not(:last-of-type)::after{display:none}
  .stop-node{position:relative;inset:auto;top:auto;display:block;margin-bottom:22px}
  .stop.is-goal .stop-node{margin-block:-4px 18px}
  .stop-text{max-width:none}
}
@media (min-width:1100px) and (max-width:1279px){.stop-name{font-size:var(--fs-lead)}}

/* ---------- 14. S5 Beratung buchen: the climax ---------- */
/* the booking sheet (columns 1–7) and, inside the grid beside it, the fitter at the radiator (columns 8–12) */
.beratung{position:relative;padding-block:24px 40px;background:var(--band)}
.beratung :focus-visible{outline-color:var(--navy)}
.ber-grid{align-items:start}
.sheet{grid-column:1 / -1;padding:36px 20px 40px;border-radius:var(--r-xl);background:var(--white)}
.sheet-lead{margin-top:16px;max-width:30rem}
.booking{margin-top:40px}
.slots-label{font-weight:600}
.slots{display:grid;gap:12px;margin-top:16px}
.slot-day{display:grid;gap:8px}
.slot-date{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.slot-wd{font-weight:600}
.slot-dm{font-weight:400;color:var(--ink-2)}
.slot-row{display:flex;flex-wrap:wrap;gap:8px}
/* phones: the times sit in even columns (three from about 380px, two below) instead of a ragged row */
@media (max-width:559px){
  .slot-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .slot{min-width:0;padding:0 6px}
}
.slot{min-width:104px;min-height:48px;padding:0 16px;border:1.5px solid var(--blue);border-radius:var(--r-md);background:var(--white);color:var(--blue);font-family:var(--font);font-size:var(--fs-ui);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums lining-nums;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.slot:hover{background:var(--tint)}
.slot[aria-pressed="true"]{border-color:var(--panel);background:var(--panel);color:var(--white)}
.chosen{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.chosen b{font-variant-numeric:tabular-nums lining-nums}
.field{display:grid;gap:8px;margin-top:24px}
.field label{font-size:var(--fs-small);font-weight:600;line-height:1.5}
.hint{font-weight:400;color:var(--ink-2)}
.field input,.field select{width:100%;height:56px;padding:0 16px;border:1.5px solid var(--ink-2);border-radius:var(--r-md);background:var(--white);color:var(--ink);font-size:var(--fs-body)}
.field input:hover,.field select:hover{border-color:var(--ink)}
.field select{-webkit-appearance:none;appearance:none;padding-inline-end:52px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F4E79' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center;cursor:pointer;text-overflow:ellipsis}
[dir=rtl] .field select{background-position:left 16px center}
.field input:focus,.field select:focus{outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.field-check{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:12px;margin-top:24px}
.field-check input{width:24px;height:24px;margin:3px 0 0;accent-color:var(--panel)}
.field-check label{font-size:var(--fs-body);font-weight:400;line-height:1.6}
.submit{width:100%;margin-top:32px}
.done{display:grid;gap:12px}
.done:focus{outline:none}
.done p{max-width:34rem}
.after{margin-top:32px;max-width:34rem}
.bullets{margin-top:12px;padding-inline-start:1.2em;list-style:disc}
.bullets li{padding-inline-start:4px;max-width:34rem}
.bullets li::marker{color:var(--ink-2)}
.bullets li + li{margin-top:8px}
.call{margin-top:32px;padding-top:24px;border-top:1px solid var(--rule)}
/* phones: after the sheet, inside the gutters, 4:5 */
.ber-photo{grid-column:1 / -1;margin:24px 0 0;aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-xl);background:#D9D4CB}
.ber-frame{position:relative;height:100%}
.ber-photo img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:78% 62%}
/* the client's own credo on the photo, as a panel-coloured block (a colour block over the photograph) */
.ber-quote{position:absolute;inset-inline-start:16px;bottom:16px;display:grid;gap:2px;max-width:calc(100% - 32px);padding:16px 20px;border-radius:var(--r-lg);background:var(--panel);color:var(--white)}
.ber-quote .t-small{color:var(--white)}
@media (min-width:700px){.ber-quote{inset-inline-start:24px;bottom:24px;padding:20px 24px}}
@media (min-width:560px){
  .slot-day{grid-template-columns:9.5rem minmax(0,1fr);align-items:center;column-gap:16px}
  .slot-date{display:grid;line-height:1.35}
}
@media (min-width:700px){
  .beratung{padding-block:var(--sec-l)}
  .sheet{padding:48px}
  /* 4:3 keeps his whole head, his face and the hand with the ruler in one frame */
  .ber-photo{aspect-ratio:4/3}
  .ber-photo img{object-position:50% 58%}
}
@media (min-width:1000px) and (max-width:1279px){
  /* the sheet keeps a comfortable measure; the photo follows it, wide */
  .sheet{grid-column:1 / span 10}
  .ber-photo{grid-column:1 / span 10}
}
@media (min-width:1280px){
  .sheet{grid-column:1 / span 7;grid-row:1}
  /* the column runs the full height of the sheet; the photo in it is one screen tall and stays in view while the
     sheet scrolls (no motion of its own), all four corners rounded. It never upscales when the form opens. */
  .ber-photo{grid-column:8 / -1;grid-row:1;align-self:stretch;margin:0;aspect-ratio:auto;overflow:visible;border-radius:0;background:none}
  /* the photo column takes the sheet's height and never adds its own (contain:size), so the photo is never taller than the sheet */
  .ber-photo{contain:size}
  .ber-frame{position:sticky;top:calc(var(--hdr-h) + 24px);height:min(calc(100svh - var(--hdr-h) - 48px),880px,100%);overflow:hidden;border-radius:var(--r-xl);background:#D9D4CB}
  .ber-photo img{object-position:86% 50%}
}
@media (min-width:1280px) and (max-width:1439px){
  .sheet{padding:40px}
  .slot-day{grid-template-columns:7.5rem minmax(0,1fr)}
  .slot{min-width:96px;padding:0 12px}
}

/* ---------- 15. S6 Häufige Fragen: one white card of questions on the paper ground ---------- */
.fragen{background:var(--paper);padding-block:var(--sec-m)}
.fragen-title,.fragen-note,.faq{grid-column:1 / -1}
/* one column: heading, the card, then the note as a plain line under it */
.fragen-note{margin-top:28px;max-width:40rem}
.fragen-note .text-btn{margin-top:4px}
.faq{margin-top:40px;padding-inline:clamp(20px,2.6vw,40px);border-radius:var(--r-xl);background:var(--white);box-shadow:0 1px 2px rgba(11,37,54,.05),0 8px 24px rgba(11,37,54,.06)}
.faq details + details{border-top:1px solid var(--rule)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px;padding:22px 0;font-size:var(--fs-lead);font-weight:500;line-height:1.4;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
/* a plain plus that turns into a cross when the answer is open */
.faq summary .i{flex:none;color:var(--blue);transition:transform .25s cubic-bezier(.65,0,.25,1)}
.faq details[open] summary .i{transform:rotate(45deg)}
.faq-a{padding-bottom:32px;font-variant-numeric:tabular-nums lining-nums}
.faq-a p{max-width:44rem}
.faq-a .arrow{display:inline-block;margin-top:16px;padding-block:8px}
@media (min-width:1000px){.faq{margin-top:48px}}

/* ---------- 16. S7 Standorte: the head office as a colour card, the cities as tiles ---------- */
.orte{background:var(--white);padding-block:var(--sec-m)}
.orte-head,.hq,.orte-list{grid-column:1 / -1}
.orte-head .t-lead{margin-top:16px;max-width:34rem}
.hq{margin-top:40px;padding:32px 28px;border-radius:var(--r-xl);background:var(--panel);color:var(--white);font-variant-numeric:tabular-nums lining-nums}
.hq-label{font-weight:600;color:var(--on-navy)}
.hq p + p{margin-top:12px}
.hq .link,.hq .arrow{color:var(--white)}
.hq :focus-visible{outline-color:var(--white)}
.hq .arrow{display:inline-block;margin-top:20px;padding-block:8px}
.orte-list{margin-top:32px}
/* every city a soft paper tile: the name, a tag where there is one, and the arrow */
.cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.city{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;min-height:72px;padding:14px;border-radius:var(--r-lg);background:var(--paper);color:var(--ink);text-decoration:none;transition:background-color .2s}
.city:hover{background:var(--tint)}
.city-label{display:grid;gap:2px;min-width:0}
.city-name{font-size:var(--fs-lead);font-weight:500;line-height:1.3}
.city .ul-h{background-image:none}
.city-tag{color:var(--ink-2)}
.city .i{flex:none;color:var(--blue);transition:translate .2s ease}
.city:hover .i{translate:3px 0}
[dir=rtl] .city:hover .i{translate:-3px 0}
.cities-note{margin-top:24px}
/* phones: two tiles side by side carry the name alone (the tile itself reads as a button) */
@media (max-width:699px){
  .city-name{font-size:1.1875rem}
  .city .i{display:none}
}
/* below 360px "Ludwigshafen" no longer fits half the width: one tile per row */
@media (max-width:359px){.cities{grid-template-columns:minmax(0,1fr)}}
@media (min-width:700px){
  .cities{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .city{min-height:84px;padding:18px 22px}
  .hq{grid-column:1 / span 6}
}
@media (min-width:1000px){
  .orte .grid{align-items:start}
  .orte-head{grid-column:1 / span 6;grid-row:1}
  .hq{grid-column:7 / -1;grid-row:1;margin-top:0;padding:36px 40px}
  .orte-list{grid-column:1 / -1;grid-row:2;margin-top:48px}
  .cities{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- 17. Footer ---------- */
.site-footer{background:var(--deep);color:var(--on-navy)}
.site-footer .link,.site-footer .arrow{color:var(--white)}
.site-footer .ph{color:var(--panel-ph)}
/* two tones, after the DEKRA Akademie footer: the call to action on a lighter band, links on the deep ground */
.f-band{background:var(--footer-top)}
.f-top{row-gap:32px;padding-block:var(--sec-m)}
.f-title{grid-column:1 / -1;color:var(--white);max-width:15em}
.f-actions{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:24px 40px}
.f-phone{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;color:var(--white)}
.f-number{color:var(--white);font-variant-numeric:tabular-nums lining-nums;text-decoration:none;white-space:nowrap}
.f-number:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.f-free{color:var(--on-navy)}
/* side by side from 1280: title on axis A, the button and the number (set in the H2 size) end on the right edge;
   "kostenlos" sits under the number so the pair fits columns 7–12, and the block's foot meets the title's foot */
@media (min-width:1280px){
  .f-top{align-items:end}
  .f-title{grid-column:1 / span 6}
  .f-actions{grid-column:7 / -1;justify-content:flex-end;column-gap:40px}
  .f-phone{display:grid;row-gap:2px}
  .f-number{line-height:1}
}
/* brand row: the logo on the left, "Folgen Sie uns" with bare Instagram and Facebook icons on the right */
.f-brand{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-block:32px}
.f-logo{color:var(--white)}
.f-social{display:flex;align-items:center;gap:4px;color:var(--white)}
.f-social > span{margin-inline-end:8px}
.f-social a{display:grid;place-items:center;width:44px;height:44px;color:var(--white)}
.f-social .i{transition:translate .2s}
.f-social a:hover .i{translate:0 -2px}
@media (prefers-reduced-motion:reduce){.f-social .i{transition:none}}
.f-cols{row-gap:48px;padding-block:48px 64px;border-top:1px solid var(--rule-dark)}
.fbox{grid-column:1 / -1}
.fbox summary{list-style:none;cursor:default}
.fbox summary::-webkit-details-marker{display:none}
.fbox summary .i{display:none}
.fbox h3{font-size:var(--fs-small);font-weight:600;line-height:1.5;color:var(--white)}
.fbox-body{margin-top:16px;font-variant-numeric:tabular-nums lining-nums}
.fbox ul{display:grid;gap:8px}
.fbox a,.f-chat{color:var(--on-navy);text-decoration:none}
.fbox a:hover,.f-chat:hover{color:var(--white)}
.fbox a[aria-current="true"] .ul{background-image:none}
.f-chat{padding:0;border:0;background:none;font:inherit;text-align:start;cursor:pointer}
.fbox p + p,.fbox p + ul,.fbox ul + p{margin-top:12px}
@media (min-width:700px){.fbox{grid-column:span 6}}
@media (min-width:1200px){
  .fbox-kontakt{grid-column:1 / span 3}
  .fbox-wb{grid-column:4 / span 3}
  .fbox-fg{grid-column:7 / span 3}
  .fbox-lang{grid-column:10 / span 3}
}
@media (max-width:699px){
  .f-cols{row-gap:0;padding-block:8px 0}
  .fbox{border-bottom:1px solid var(--rule-dark)}
  .fbox summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;cursor:pointer}
  .fbox summary .i{display:block;color:var(--white);transition:transform .2s}
  .fbox[open] summary .i{transform:rotate(180deg)}
  .fbox-body{margin-top:0;padding-bottom:24px}
  .fbox a,.f-chat{display:inline-flex;align-items:center;min-height:48px}
  .fbox ul{gap:0}
  .f-legal{border-top:0}
}
.f-legal{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 24px;padding-block:16px 24px;border-top:1px solid var(--rule-dark);font-variant-numeric:tabular-nums lining-nums}
.f-legal ul{display:contents}
.f-legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-navy);text-decoration:none}
.f-legal p{padding-block:10px}
.f-legal a:hover{color:var(--white);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (min-width:1200px){.f-legal p{margin-inline-start:auto}}   /* the copyright line ends on the right edge */

/* ---------- 18. Mobile quick bar (below 700) ---------- */
.quickbar{display:none}
@media (max-width:699px){
  .quickbar{position:fixed;inset-inline:0;bottom:0;z-index:30;display:grid;grid-template-columns:1fr 1fr 1.6fr;height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);background:var(--white);border-top:1px solid var(--rule)}
  .qb{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:0 8px;border:0;background:none;color:var(--ink);font-family:var(--font);font-size:var(--fs-ui);font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer}
  .qb + .qb{border-inline-start:1px solid var(--rule)}
  .qb .i{color:var(--blue)}
  .qb-main{background:var(--action);color:var(--on-action);border-inline-start:0!important}
  .qb:focus-visible{outline-offset:-4px}
  .qb-main:focus-visible{outline-color:var(--on-action)}
}
@media (max-width:359px){.qb{flex-direction:column;gap:2px;padding:0 4px}}

/* ---------- 19. Lotse chat ---------- */
.lotse-launcher{position:fixed;inset-inline-end:24px;bottom:24px;z-index:35;min-height:48px;padding:0 22px;border:1px solid rgba(255,255,255,.3);border-radius:var(--r-md);background:var(--action);color:var(--on-action);font-family:var(--font);font-size:var(--fs-ui);font-weight:600;line-height:1.2;cursor:pointer;transition:background-color .2s,opacity .2s,visibility .2s}
.lotse-launcher:hover{background:var(--action-hover)}
.lotse-launcher.is-away{opacity:0;visibility:hidden}
@media (max-width:699px){.lotse-launcher{display:none}}
.lotse-panel{position:fixed;inset-inline-end:24px;bottom:24px;z-index:45;display:flex;flex-direction:column;width:min(420px,calc(100vw - 48px));height:min(660px,calc(100dvh - 128px));overflow:hidden;background:var(--white);color:var(--ink);border-radius:var(--r-xl);box-shadow:var(--shadow-overlay)}
@media (max-width:699px){
  .lotse-panel{inset-inline:0;top:var(--lotse-top,64px);bottom:calc(64px + env(safe-area-inset-bottom,0px));width:auto;height:auto;border-radius:var(--r-xl) var(--r-xl) 0 0}
}
.lotse-head{display:flex;align-items:flex-start;gap:12px;padding:24px 12px 16px 24px;padding-inline:24px 12px;border-bottom:1px solid var(--rule)}
.lotse-head p{color:var(--ink-2)}
.lotse-close{display:grid;place-items:center;flex:none;width:48px;height:48px;margin-inline-start:auto;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;transition:color .15s}
.lotse-close:hover{color:var(--blue)}
.lotse-log{flex:1;display:flex;flex-direction:column;gap:12px;overflow:auto;padding:24px}
.msg{max-width:88%;padding:12px 16px;border-radius:var(--r-lg)}
.msg-bot{align-self:flex-start;background:var(--paper);border-end-start-radius:4px}
.msg-user{align-self:flex-end;background:var(--action);color:var(--on-action);border-end-end-radius:4px}
.msg details{padding-block:3px;border-top:1px solid var(--rule)}
.msg summary{padding-block:7px;font-weight:600;cursor:pointer}
.msg details p{margin-top:6px}
.mini-form{display:grid;gap:8px;margin-top:12px}
.mini-form label{font-size:var(--fs-small);font-weight:600}
.mini-form input,.mini-form select{height:48px;padding:0 12px;border:1.5px solid var(--ink-2);border-radius:var(--r-md);background:var(--white)}
.mini-form select{-webkit-appearance:none;appearance:none;padding-inline-end:44px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F4E79' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center}
[dir=rtl] .mini-form select{background-position:left 12px center}
.mini-form .btn{margin-top:8px;min-height:48px}
.lotse-actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 16px}
.lotse-actions button{min-height:48px;padding:0 16px;border:1.5px solid var(--blue);border-radius:var(--r-md);background:var(--white);color:var(--blue);font-family:var(--font);font-size:var(--fs-ui);font-weight:600;line-height:1.2;cursor:pointer;transition:background-color .15s}
.lotse-actions button:hover{background:var(--tint)}
.lotse-form{position:relative;margin:0 24px 12px}
.lotse-form input{width:100%;height:56px;padding-inline:16px 56px;border:1.5px solid var(--ink-2);border-radius:var(--r-md);background:var(--white);color:var(--ink)}
.lotse-form input::placeholder{color:var(--ink-2);opacity:1}
.lotse-form input:focus{outline:3px solid var(--blue);outline-offset:1px}
.lotse-form button{position:absolute;inset-inline-end:4px;top:4px;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:none;color:var(--blue);cursor:pointer;transition:color .15s}
.lotse-form button:hover{color:var(--navy)}
.lotse-foot{padding:0 24px 16px;color:var(--ink-2)}
.lotse-foot a{color:var(--blue);text-underline-offset:3px}

/* ---------- 20. Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}
  .door:hover > img{transform:none}
  .arrow:hover .i,.city:hover .i,.mega-sits a:hover .i,.door:hover .door-arrow,.sw-btn:hover .sw-arrow{translate:none}
}

/* ---------- 21. English page (html[lang=en]) ---------- */
/* Course names keep the official German title (lang=de) on line 1; the English meaning (.gloss) gets its own line:
   on the doors in the text size under the title, in menus and lists as a quieter second line. */
html[lang="en"] .gloss{display:block}
html[lang="en"] .door-gloss{margin-top:4px;font-family:var(--font);color:var(--on-navy);text-wrap:pretty}
html[lang="en"] .door-title + .door-facts{margin-top:12px}
/* (phone door scrims: see section 10, the scrim follows the text block in every language) */
html[lang="en"] :is(.mega-links,.drawer) .gloss{font-weight:400;color:var(--ink-2)}
/* a link that holds a gloss line stays one box, so its focus ring covers both lines (drawer and start-date links already are) */
html[lang="en"] .mega-links a{display:inline-block}
@media (min-width:700px){html[lang="en"] .fbox-wb a{display:inline-block}}
/* phone footer accordion: two-line course links get the drawer's breathing room */
@media (max-width:699px){html[lang="en"] .fbox-wb a{padding-block:6px;line-height:1.4}}
/* English rag: the two-sentence lead breaks after the first sentence; questions never leave one word alone */
html[lang="en"] :is(.sec-head .t-lead,.mega-intro p + p){text-wrap:balance}
html[lang="en"] :is(.faq summary > span,.msg summary){text-wrap:pretty}

/* ---------- 22. Sliding underlines ---------- */
/* Underlines are drawn as a 1px background on inline spans, so they follow every line of a wrapped label and leave
   the arrow out. On hover the line slides out to the end and comes back from the start; labels without a resting
   underline (situations, questions, cities) draw theirs from the start. */
.ul,.link,.hero-call > span,.kurse-langs a{
  --ul-c:color-mix(in srgb,currentColor 45%,transparent);
  text-decoration:none;
  background-image:linear-gradient(var(--ul-c),var(--ul-c));
  background-repeat:no-repeat;
  background-position:left 0 bottom 0;
  background-size:100% 1px;
  padding-bottom:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
[dir=rtl] :is(.ul,.link,.hero-call > span,.kurse-langs a){background-position:right 0 bottom 0}
.arrow,.dark .arrow,.sw-p .arrow,.text-btn,.help-call,.drawer-langs a,.dark .link{text-decoration:none}
.drawer-langs a[aria-current="true"] .ul{background-image:none}
@keyframes ul-slide{
  0%{background-size:100% 1px;background-position:right 0 bottom 0}
  45%{background-size:0 1px;background-position:right 0 bottom 0}
  55%{background-size:0 1px;background-position:left 0 bottom 0}
  100%{background-size:100% 1px;background-position:left 0 bottom 0}
}
@keyframes ul-slide-rtl{
  0%{background-size:100% 1px;background-position:left 0 bottom 0}
  45%{background-size:0 1px;background-position:left 0 bottom 0}
  55%{background-size:0 1px;background-position:right 0 bottom 0}
  100%{background-size:100% 1px;background-position:right 0 bottom 0}
}
:is(.arrow,.text-btn,.help-call,.drawer-langs a,.fbox a,.f-chat):hover .ul,.link:hover,.hero-call:hover > span,.kurse-langs a:hover{
  --ul-c:currentColor;animation:ul-slide .6s cubic-bezier(.65,0,.25,1) both;
}
/* the last word follows a moment later, so the two pieces of an arrow link read as one sweep */
.arrow:hover .nw .ul{animation-delay:.07s}
[dir=rtl] :is(:is(.arrow,.text-btn,.help-call,.drawer-langs a,.fbox a,.f-chat):hover .ul,.link:hover,.hero-call:hover > span,.kurse-langs a:hover){animation-name:ul-slide-rtl}
/* hover-only underlines grow from the start and leave towards the end */
.ul-h{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:right 0 bottom 0;
  background-size:0 1px;
  padding-bottom:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .4s cubic-bezier(.65,0,.25,1);
}
[dir=rtl] .ul-h{background-position:left 0 bottom 0}
.sw-btn:hover .sw-label,.faq summary:hover > span,.city:hover .city-name{text-decoration:none}
.sw-btn:hover .ul-h,.faq summary:hover .ul-h,.city:hover .ul-h{background-size:100% 1px;background-position:left 0 bottom 0}
[dir=rtl] :is(.sw-btn:hover .ul-h,.faq summary:hover .ul-h,.city:hover .ul-h){background-position:right 0 bottom 0}
.city .ul-h{background-size:0 1.5px}
.city:hover .ul-h{background-size:100% 1.5px}
.sw-btn[aria-expanded="true"] .ul-h{background-size:0 1px}
@media (hover:none){.sw-btn:hover .ul-h,.faq summary:hover .ul-h{background-size:0 1px}}
@media (prefers-reduced-motion:reduce){
  .ul,.link,.hero-call > span,.kurse-langs a{animation:none!important}
  .ul-h{transition:none}
}

/* ---------- 23. Details borrowed from well-made sites ---------- */
/* Situations get a bare pictogram in a trade colour, so a reader finds their own line at a glance. */
.sw-btn{justify-content:flex-start}
.sw-label{flex:1;min-width:0}
.sw-ico{flex:none;width:28px;height:28px;stroke-width:1.6;color:var(--ico,var(--t1))}
#t-dr,#t-un{--ico:var(--t2)}
#t-bw,#t-vm{--ico:var(--t3)}
.sw-btn[aria-expanded="true"] .sw-ico{color:var(--white)}
@media (min-width:1000px){.sw-btn{gap:16px}}

/* The proofs as one white strip: each name set large, what it means in small type under it, thin rules between.
   Text only, no logos and no icons. */
.proof{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;padding:28px 0;border-radius:var(--r-xl);background:var(--white)}
.proof li{display:grid;align-content:start;gap:6px;min-width:0;padding-inline:20px}
.proof li:nth-child(even){border-inline-start:1px solid var(--rule)}
.proof-mark{font-size:var(--fs-h3);font-weight:600;line-height:1.15;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.proof-cap{color:var(--ink-2)}
.kurse-meta .kurse-langs{grid-column:1 / -1}
/* narrow phones: one fact per row, the name over its meaning, thin rules between */
@media (max-width:559px){
  .proof{grid-template-columns:minmax(0,1fr);row-gap:0;padding:4px 20px}
  .proof li{gap:4px;padding:18px 0}
  .proof li:nth-child(even){border-inline-start:0}
  .proof li + li{border-top:1px solid var(--rule)}
  .proof-mark{font-size:1.375rem}
}
@media (min-width:1000px){
  .proof{grid-template-columns:repeat(4,minmax(0,1fr));padding:36px 0}
  .proof li{padding-inline:32px}
  .proof li + li{border-inline-start:1px solid var(--rule)}
}

/* The next start sits on the photo as a small white data card (real data, not a badge). The door stays one link. */
.door-date{position:absolute;top:20px;inset-inline-start:20px;z-index:0;display:grid;max-width:calc(100% - 40px);padding:12px 16px 13px;border-radius:14px;background:var(--white);color:var(--ink);line-height:1.35;font-variant-numeric:tabular-nums lining-nums}
.door-date .t-small{color:var(--ink-2)}
.door-date-v{font-size:var(--fs-ui);font-weight:600;color:var(--ink)}
.door-date .door-date-where{color:var(--ink)}
@media (min-width:700px){.door-date{top:24px;inset-inline-start:24px;padding:14px 18px 15px}}
/* phones: the electrician moves right, so the date card never sits on her face */
@media (max-width:699px){.door-haus > img{object-position:22% 24%}}

/* ---------- 24. Colour options ---------- */
/* The same page in three colour options for the client (prototype bar, or ?farbe=gruen / ?farbe=modern).
   Only tokens change, and every pairing keeps WCAG AA: text 4.5:1 or more, white on fields and buttons 6.5:1 or more. */
html[data-theme="gruen"]{
  /* the greens the client pointed at on the DEKRA Akademie site: their contact button green (#006B52) for buttons,
     fields and the booking band, the darker #01604A of their footer; the logo green (#008143) only marks Haustechnik */
  --blue:#006B52; --sky:#BCE3D5; --tint:#E6F2EE;
  --action:#006B52; --action-hover:#01604A; --light-btn-ink:#006B52;
  --panel:#006B52; --panel-ph:#DDF0E8;
  --deep:#01604A; --deep-rgb:1,96,74; --footer-top:#006B52;
  --band:#006B52; --ground:#F2F8F6;
  --t1:#008143; --t2:#1F5F7A; --t3:#53701B;
  --t1-rgb:0,92,58; --t2-rgb:22,72,94; --t3-rgb:50,68,16;
}
html[data-theme="modern"]{
  /* loud and young, as the client asked: cobalt for every call to action and the booking band, midnight fields.
     Blue is the complement of the orange logo, so the logo stays the only warm colour and stands out more. */
  --blue:#2449E8; --sky:#AFC0FF; --tint:#ECF0FF;
  --action:#2449E8; --action-hover:#1A36C2; --light-btn-ink:#2449E8;
  --panel:#0E1A3D; --panel-ph:#D5DDFF;
  --deep:#0A1230; --deep-rgb:10,18,48; --footer-top:#2449E8;
  --band:#2449E8; --ground:#ECF0FF;
  --t1:#2449E8; --t2:#0A6B78; --t3:#187A43;
  --t1-rgb:24,48,170; --t2-rgb:6,80,90; --t3-rgb:16,92,50;
}

/* ---------- 25. Phones: softer containers and touch ---------- */
/* The quick bar floats as one rounded bar with the call to action as a filled pill, and the chat sheet floats above
   it the same way. Below 1000px the situation switch is one white card whose chosen row fills it edge to edge. On
   touch screens a press shows as a short scale or fade instead of the grey tap flash. */
html{-webkit-tap-highlight-color:transparent}
@media (max-width:699px){
  :root{--qb-h:78px}
  .quickbar{inset-inline:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:58px;padding:4px;border:1px solid var(--rule);border-radius:18px;box-shadow:0 10px 28px rgba(11,37,54,.16),0 2px 6px rgba(11,37,54,.08)}
  .qb{position:relative;border-radius:14px}
  .qb + .qb{border-inline-start:0}
  .qb + .qb:not(.qb-main)::before{content:"";position:absolute;inset-inline-start:0;top:12px;bottom:12px;border-inline-start:1px solid var(--rule)}
  .lotse-panel{inset-inline:10px;top:calc(var(--lotse-top,64px) + 10px);bottom:calc(var(--qb-h) + env(safe-area-inset-bottom,0px));border-radius:var(--r-xl);box-shadow:0 18px 48px rgba(11,37,54,.22)}
  .sw-btn{gap:14px;font-size:var(--fs-body)}
}
@media (max-width:999px){
  .sw{padding-inline:16px;border:0;border-radius:var(--r-xl);background:var(--white);overflow:hidden;box-shadow:0 1px 2px rgba(11,37,54,.05),0 8px 24px rgba(11,37,54,.06)}
  .sw-h:first-of-type{border-top:0}
  .sw-h.is-open::before{inset:-1px -16px 0;border-radius:0}
  .sw-h.is-open + .sw-p{margin-inline:-16px;padding:0 16px 24px;border-radius:0}
}
@media (hover:none){
  .btn,.qb,.door{transition:transform .15s ease,background-color .2s,color .2s}
  .btn:active,.qb:active{transform:scale(.97)}
  .door:active{transform:scale(.985)}
  :is(.sw-btn,.faq summary,.city,.drawer-link,.drawer summary,.drawer details a):active{opacity:.65}
}
/* the phone menu reads as grouped white cards on the paper ground: the topics, then the call to action, the extra
   links, and the languages as buttons */
.drawer-group{margin-top:8px;padding-inline:20px;border-radius:var(--r-xl);background:var(--white)}
.drawer-group > :last-child{border-bottom:0}
.drawer .btn{margin-top:20px}
.drawer-util{margin-top:20px;padding:2px 20px;border-radius:var(--r-xl);background:var(--white)}
.drawer-util li + li{border-top:1px solid var(--rule)}
.drawer-util a,.drawer-chat{min-height:52px}
.drawer-langs{align-items:center;gap:8px;margin-top:20px;padding-top:0;border-top:0}
.drawer-langs a{min-height:44px;padding:0 16px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--white);color:var(--ink)}
.drawer-langs a .ul{background-image:none}
.drawer-langs a[aria-current="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.drawer-langs .ph{margin-inline-start:8px}
/* phones: the three course links become one white card of tappable rows */
@media (max-width:699px){
  .kurse-more{row-gap:0}
  .kurse-more-a,.kurse-more-b{padding-inline:20px;background:var(--white)}
  .kurse-more-a{padding-top:4px;border-radius:var(--r-xl) var(--r-xl) 0 0}
  .kurse-more-b{gap:0;padding-bottom:4px;border-radius:0 0 var(--r-xl) var(--r-xl)}
  .kurse-more-b li{border-top:1px solid var(--rule)}
  .kurse-more .arrow{display:block;padding-block:16px}
  .kurse-meta{margin-top:32px}
}