/* ---------- design tokens ----------
     Hell ist die Basis. Der Dark Mode ueberschreibt nur die Farbwerte, keine
     Regel weiter unten muss die Variante kennen.
     Drei Zustaende: ohne data-theme gilt die Systemeinstellung,
     data-theme="dark" / "light" ist die bewusste Wahl des Besuchers. */
  :root{
    color-scheme: light;
    --paper: #FFFFFF;
    --paper-2: #F3F4F7;
    --ink: #14171F;
    --ink-soft: #5B6472;
    --berry: #2646C7;
    --berry-dark: #1B3494;
    --mustard: #D6373D;
    --line: #E3E6EC;
    --phone-frame: #14171F;
    --overlay: rgba(var(--shadow),0.55);
    --shadow: 20,23,31;
    --radius: 6px;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      color-scheme: dark;
      --paper: #10131A;
      --paper-2: #171B24;
      --ink: #ECEFF4;
      --ink-soft: #99A3B4;
      --berry: #7D9BFF;
      --berry-dark: #A3B8FF;
      --mustard: #F4797E;
      --line: #272D3A;
      --phone-frame: #2B3140;
      --overlay: rgba(0,0,0,0.72);
      --shadow: 0,0,0;
    }
  }

  :root[data-theme="dark"]{
    color-scheme: dark;
    --paper: #10131A;
    --paper-2: #171B24;
    --ink: #ECEFF4;
    --ink-soft: #99A3B4;
    --berry: #7D9BFF;
    --berry-dark: #A3B8FF;
    --mustard: #F4797E;
    --line: #272D3A;
    --phone-frame: #2B3140;
    --overlay: rgba(0,0,0,0.72);
    --shadow: 0,0,0;
  }


  *{ box-sizing: border-box; }

  html{
    scroll-behavior: smooth;
    /* iOS Safari vergrößert sonst eigenmächtig die Schrift im Querformat */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* ---------- page load fade-in ----------
     Der sichtbare Zustand ist der Grundzustand; die Animation blendet nur von
     unsichtbar dorthin ein. Andersherum (opacity:0 als Basis) bliebe die Seite
     leer, sobald die Animation nicht durchläuft. */
  html.js body{
    animation: page-fade-in .6s ease-out;
  }
  @keyframes page-fade-in{ from{ opacity: 0; } to{ opacity: 1; } }

  /* ---------- Logo-Intro beim ersten Öffnen ----------
     Ablauf: Kreis zeichnet sich, V zeichnet sich, Schriftzug erscheint —
     danach fliegt das Zeichen per main.js an seinen Platz oben links und
     die Seite kommt zum Vorschein. Die Klasse .zeige-intro am <html> setzt das Kopf-Skript. */
  .intro{ display: none; }
  html.zeige-intro .intro{
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    background: var(--paper);
    cursor: pointer;
    /* Notbremse, falls main.js hängt: nach 5 s ist die Seite frei */
    animation: intro-notfall 0s linear 5s forwards;
  }
  @keyframes intro-notfall{ to{ visibility: hidden; pointer-events: none; } }
  /* sonst würde der Body samt Intro erst aus dem Nichts einblenden */
  html.zeige-intro body{ animation: none; }
  .intro-inhalt{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
  }
  .intro .intro-mark{
    width: 104px;
    height: 104px;
    animation: intro-pop .9s cubic-bezier(.2,.8,.2,1) both;
  }
  /* Striche "zeichnen": Strichlänge = Umfang des Kreises (2·π·17,5 ≈ 110)
     bzw. Länge des V (≈ 32) */
  .intro-mark .ring{
    stroke-dasharray: 110;
    stroke-dashoffset: 110;
    transform: rotate(-90deg);
    transform-origin: center;
    transform-box: fill-box;
    animation: intro-strich .8s cubic-bezier(.65,0,.35,1) .1s forwards;
  }
  .intro-mark .v{
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: intro-strich .5s cubic-bezier(.65,0,.35,1) .65s forwards;
  }
  .intro-name{
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    opacity: 0;
    animation: intro-name .5s ease 1s forwards;
  }
  @keyframes intro-pop{ from{ opacity: 0; transform: scale(.6); } to{ opacity: 1; transform: none; } }
  @keyframes intro-strich{ to{ stroke-dashoffset: 0; } }
  @keyframes intro-name{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }
  /* Das Logo in der Menüleiste wartet, bis das fliegende Logo dort ankommt */
  html.zeige-intro .site-header .brand-mark{
    opacity: 0;
    animation: intro-logo-notfall 0s linear 5s forwards;
  }
  @keyframes intro-logo-notfall{ to{ opacity: 1; } }

  /* ---------- back to top button ---------- */
  .to-top{
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--paper);
    border: none;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow: 0 10px 26px -8px rgba(var(--shadow),0.4);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, background .2s ease;
    z-index: 150;
  }
  .to-top.visible{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .to-top:hover{ background: var(--berry); }
  .to-top svg{ width: 20px; height: 20px; }

  html.no-motion,
  html.no-motion *,
  html.no-motion *::before,
  html.no-motion *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* .reveal wird per JavaScript eingeblendet und braucht darum eine eigene
     Rückfallregel; body und .phone sind durch ihren Grundzustand abgedeckt. */

  body{
    margin:0;
    background: var(--paper);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
  }

  h1, h2, h3, .display{
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
  }

  a{ color: inherit; }

  :focus-visible{
    outline: 2px solid var(--berry);
    outline-offset: 3px;
  }

  .wrap{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 28px;
  }

  /* ---------- header ---------- */
  header{
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    transition: box-shadow .2s ease;
  }
  header.scrolled{
    box-shadow: 0 6px 20px -12px rgba(var(--shadow),0.25);
  }
  header .wrap{
    display:flex;
    justify-content: space-between;
    align-items: center;
  }
  .brand{
    display:flex;
    align-items:center;
  }
  nav a{
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ink-soft);
    margin-left: 6px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  nav a:not(.nav-cta):hover{
    background: var(--paper-2);
    border-color: var(--line);
    color: var(--ink);
  }
  .nav-cta{
    background: var(--ink);
    color: var(--paper) !important;
    margin-left: 14px;
    padding: 9px 18px;
    border-radius: var(--radius);
  }
  .nav-cta:hover{ background: var(--berry); }
  nav{
    display:flex;
    align-items:center;
    position: relative;
  }
  .nav-links{
    display:flex;
    align-items:center;
  }
  .nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    background:none;
    border:none;
    cursor:pointer;
    padding: 8px;
    margin-left: 10px;
    color: var(--ink);
  }
  .nav-toggle svg{ width:22px; height:22px; }

  .lang-switch{
    position: relative;
    margin-left: 10px;
  }
  .lang-current{
    display:flex;
    align-items:center;
    gap: 4px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .lang-current:hover{ border-color: var(--berry); color: var(--berry); }
  .lang-arrow{ font-size: 10px; transition: transform .15s ease; }
  .lang-switch.open .lang-arrow{ transform: rotate(180deg); }
  .lang-options{
    display:none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 28px -12px rgba(var(--shadow),0.3);
    z-index: 210;
    min-width: 64px;
  }
  .lang-switch.open .lang-options{ display:block; }
  .lang-options button{
    display:block;
    width: 100%;
    background: none;
    border: none;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    text-align: left;
  }
  .lang-options button:hover{ background: var(--paper-2); color: var(--ink); }

  /* ---------- hero ---------- */
  .hero{
    padding: 72px 0 88px;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    align-items: center;
  }
  .hero-tag{
    font-size: 15px;
    color: var(--ink);
    margin-bottom: 18px;
  }
  .hero h1{
    font-size: clamp(38px, 5vw, 58px);
    line-height: 1.05;
  }
  .hero h1 .accent{
    font-style: italic;
    font-weight: 500;
  }
  .hero p.lead{
    margin-top: 22px;
    font-size: 18px;
    color: var(--ink-soft);
    max-width: 46ch;
  }
  .hero-actions{
    margin-top: 32px;
    display:flex;
    gap: 16px;
    align-items:center;
  }
  .mini-flow{
    margin-top: 36px;
    display:flex;
    align-items:center;
    flex-wrap: wrap;
    gap: 10px;
  }
  .mini-flow-step{
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--paper);
  }
  .mini-flow-arrow{
    color: var(--berry);
    font-size: 15px;
  }
  .btn{
    display:inline-block;
    padding: 13px 26px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    border: 1px solid transparent;
    transition: transform .15s ease, background .15s ease;
  }
  .btn-primary{
    background: var(--berry);
    color: var(--paper);
  }
  .btn-primary:hover{ background: var(--berry-dark); transform: translateY(-1px); }
  .btn-ghost{
    border-color: var(--ink);
    color: var(--ink);
  }
  .btn-ghost:hover{ background: var(--ink); color: var(--paper); }

  /* phone mockup */
  /* 3D: Das Handy steht leicht schräg im Raum. --nx / --ny (-1 bis 1) setzt
     main.js — am Computer nach der Mausposition, am Handy nach der
     Scrollposition. Ohne Skript oder bei pausierten Animationen bleibt die
     ruhige Grundhaltung. */
  .phone{
    --nx: 0;
    --ny: 0;
    position: relative;
    justify-self: center;
    width: 240px;
    background: var(--phone-frame);
    border-radius: 30px;
    padding: 12px 12px 20px;
    transform: perspective(1000px)
               rotateX(calc(6deg - var(--ny) * 10deg))
               rotateY(calc(-14deg + var(--nx) * 18deg));
    transform-style: preserve-3d;
    box-shadow: calc(16px - var(--nx) * 20px) calc(28px - var(--ny) * 12px) 50px -18px rgba(var(--shadow),0.4);
    transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s cubic-bezier(.2,.8,.2,1);
  }
  /* solange die Maus sich bewegt, schneller nachziehen */
  .phone.folgt{ transition-duration: .15s; }
  /* Lichtreflex, der mit der Neigung über das Glas wandert */
  .phone::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at calc(28% + var(--nx) * 40%) calc(18% + var(--ny) * 30%),
                rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
    transform: translateZ(2px);
  }
  html.js .phone{
    animation: rise .7s ease-out;
  }
  /* über translate statt transform, damit die Schräglage erhalten bleibt */
  @keyframes rise{ from{ opacity:0; translate: 0 18px; } to{ opacity:1; translate: 0 0; } }

  /* Einblenden beim Scrollen — aber nur, wenn das Skript auch wirklich läuft.
     Die Klasse .js setzt das Skript im <head>. Ohne sie ist alles sichtbar:
     kein Skript, kein Fehler und keine statische Vorschau kann die Seite
     dann noch leeren. */
  .reveal{
    transition: opacity .7s ease, transform .7s ease;
  }
  html.js .reveal{
    opacity: 0;
    transform: translateY(28px);
  }
  html.js .reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  html.no-motion .reveal{ opacity: 1 !important; transform: none !important; }

  .spin-badge{
    position: absolute;
    top: -22px;
    right: -22px;
    width: 92px;
    height: 92px;
    transform: translateZ(60px);   /* schwebt vor dem Handy */
  }
  .spin-badge svg{
    width: 100%;
    height: 100%;
    animation: spin-slow 16s linear infinite;
  }
  @keyframes spin-slow{ to{ transform: rotate(360deg); } }
  .spin-badge-core{
    position: absolute;
    top: 50%; left: 50%;
    width: 34px; height: 34px;
    transform: translate(-50%, -50%);
    background: var(--berry);
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 6px 16px -4px rgba(var(--shadow),0.4);
  }
  .spin-badge-core svg{
    animation: none;
    width: 15px; height: 15px;
  }
  .phone-screen{
    background: var(--paper);
    border-radius: 20px;
    overflow: hidden;
  }
  .phone-topbar{
    display:flex;
    align-items:center;
    gap: 8px;
    padding: 12px 12px 8px;
  }
  .avatar{
    width: 26px; height:26px;
    border-radius:50%;
    background: var(--mustard);
  }
  .handle{ font-size: 12px; font-weight:600; }
  .grid-feed{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 2px;
  }
  .grid-feed div{
    aspect-ratio: 1;
  }
  .g1{ background: var(--berry); }
  .g2{ background: var(--mustard); }
  .g3{ background: var(--ink); }
  .g4{ background: var(--paper-2); border:1px solid var(--line); }
  .g5{ background: var(--ink-soft); }
  .g6{ background: var(--berry); opacity:.6; }
  .g7{ background: var(--mustard); opacity:.55; }
  .g8{ background: var(--paper-2); border:1px solid var(--line); }
  .g9{ background: var(--ink); opacity:.7; }

  /* ---------- section shared ---------- */
  section{ padding: 68px 0; }
  /* Sprungziele nicht unter den sticky Header rutschen lassen */
  section[id]{ scroll-margin-top: 100px; }
  .section-head{
    max-width: 56ch;
    margin-bottom: 44px;
  }
  .section-head .kicker{
    color: var(--ink);
    font-size: 15px;
    margin-bottom: 10px;
  }
  .section-head h2{
    font-size: clamp(28px, 3.4vw, 38px);
  }
  .section-head p{
    margin-top: 14px;
    color: var(--ink-soft);
    font-size: 16.5px;
  }

  /* ---------- services ---------- */
  .services{ border-top: 1px solid var(--line); background: var(--paper-2); }
  .service-list{
    display: flex;
    flex-direction: column;
  }
  .service-row{
    display:grid;
    grid-template-columns: 220px 1fr;
    gap: 32px;
    padding: 28px 0;
    border-top: 1px solid var(--line);
  }
  .service-row:last-child{ border-bottom: 1px solid var(--line); }
  .service-row h3{
    font-size: 21px;
    font-weight: 600;
  }
  .service-row .tag{
    display:inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--berry);
    border: 1px solid var(--berry);
    padding: 3px 10px;
    border-radius: 100px;
  }
  .service-row p{
    color: var(--ink-soft);
    max-width: 58ch;
  }

  /* ---------- pricing ---------- */
  .pricing-table{
    border-top: 1px solid var(--line);
  }
  .price-row{
    display:grid;
    grid-template-columns: 1.4fr 0.6fr 2fr;
    gap: 24px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
  }
  .price-row.head{
    color: var(--ink-soft);
    font-size: 14px;
    padding-bottom: 14px;
  }
  .price-row .plan{
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    font-size: 20px;
    font-weight:600;
  }
  .price-row .plan .badge{
    display:block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: var(--ink);
    margin-top: 4px;
  }
  .price-row .amount{
    font-size: 22px;
    font-weight: 600;
    color: var(--berry);
  }
  .price-row .amount span{
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 400;
  }
  .price-row .details{ color: var(--ink-soft); font-size: 15px; }

  /* ---------- why ---------- */
  .why{ background: var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .why .wrap{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
  .why-item{ padding-right: 20px; }
  .why-item .num{
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    font-style: italic;
    color: var(--mustard);
    font-size: 15px;
  }
  .why-item h3{ font-size: 19px; margin-top: 6px; }
  .why-item p{ color: var(--ink-soft); margin-top: 8px; font-size: 15px; }

  /* ---------- team ---------- */
  .team-grid{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
    max-width: 640px;
  }
  .team-card{
    text-align:center;
  }
  .team-photo{
    aspect-ratio: 1/1;
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color: var(--ink-soft);
    font-size: 13px;
    text-align:center;
    padding: 14px;
    margin: 0 auto 14px;
    max-width: 140px;
    overflow: hidden;
  }
  .team-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .team-card h3{ font-size: 16px; margin-bottom: 4px; }
  .team-card .team-role{ color: var(--berry); font-size: 13px; font-weight: 600; }
  .team-card .team-email{ margin-top: 8px; font-size: 13px; }
  .team-card .team-email a{ color: var(--ink-soft); text-decoration: none; }
  .team-card .team-email a:hover{ color: var(--berry); }
  .team-card .team-phone{
    margin-top: 4px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .team-card .team-phone a{ color: var(--ink-soft); text-decoration: none; }
  .team-card .team-phone a:hover{ color: var(--berry); }

  /* ---------- faq ---------- */
  .faq-groups{
    display:grid;
    gap: 38px;
  }
  .faq-group h3{
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 16px;
    color: var(--berry);
    margin-bottom: 12px;
  }
  .faq-item{
    border-bottom: 1px solid var(--line);
    padding: 15px 0;
  }
  .faq-item summary{
    cursor: pointer;
    list-style: none;
    display:flex;
    justify-content: space-between;
    align-items:center;
    gap: 16px;
    font-weight: 600;
    font-size: 16px;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item .faq-icon{
    flex-shrink:0;
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 1px solid var(--line);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size: 15px;
    color: var(--berry);
    transition: transform .2s ease;
  }
  .faq-item[open] .faq-icon{ transform: rotate(45deg); }
  .faq-item p{
    margin-top: 12px;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.65;
    max-width: 62ch;
  }

  /* ---------- contact ---------- */
  .contact .wrap{
    display:grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 56px;
  }
  .contact h2{ font-size: clamp(28px, 3.4vw, 38px); }
  .contact p.lead{ color: var(--ink-soft); margin-top: 14px; max-width: 40ch; }
  .contact-links{ margin-top: 26px; }
  .contact-links a{
    display:block;
    text-decoration: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  form{ display:flex; flex-direction:column; gap: 14px; }
  label{ font-size: 13px; color: var(--ink-soft); }
  input, textarea{
    font-family: inherit;
    font-size: 15px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    width: 100%;
  }
  input:focus, textarea:focus{ border-color: var(--berry); }
  textarea{ min-height: 110px; resize: vertical; }
  .field{ display:flex; flex-direction:column; gap:6px; }

  /* ---------- about ---------- */
  .about{ border-top: 1px solid var(--line); }
  .about .wrap{
    max-width: 68ch;
  }
  .about-text h2{ font-size: clamp(26px, 3.2vw, 34px); }
  .about-text p{ margin-top: 16px; color: var(--ink-soft); max-width: 60ch; }

  /* ---------- clients ---------- */
  /* Gleiche Breite wie "Über uns" und wenig Abstand nach oben — liest sich
     als Fortsetzung des Textes darüber. */
  .clients{ padding-top: 12px; }
  .clients .wrap{ max-width: 68ch; }
  .clients-text .kicker{ color: var(--ink); font-size: 15px; margin-bottom: 10px; }
  .clients-text h2{ font-size: clamp(22px, 2.6vw, 28px); }
  .clients-text p{ margin-top: 12px; color: var(--ink-soft); max-width: 60ch; }
  .client-logos{
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  /* Bewusst in beiden Modi weiß: Firmenlogos werden nicht umgefärbt, und das
     dunkelblaue Aptec-Logo bliebe auf dunklem Grund sonst kaum lesbar. */
  .client-logos li{
    flex: 0 1 220px;
    height: 110px;
    padding: 20px 28px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .client-logos img{
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 52px;
  }
  @media (max-width: 640px){
    .client-logos li{ flex: 1 1 140px; height: 96px; padding: 16px 20px; }
  }



  /* ---------- process ---------- */
  .process{ background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .process-steps{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  .process-step{
    position: relative;
    padding-top: 16px;
  }
  /* Der Strich über jedem Schritt. Ohne Skript steht er einfach da; mit Skript
     zeichnet er sich beim Scrollen von links nach rechts. */
  .process-step::before{
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    background: var(--berry);
  }
  .process-step .step-label{
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    font-style: italic;
    color: var(--ink);
    font-size: 14px;
  }
  .process-step h3{ font-size: 18px; margin-top: 6px; }
  .process-step p{ color: var(--ink-soft); font-size: 14.5px; margin-top: 6px; }

  footer{
    border-top: 1px solid var(--line);
    background: var(--paper-2);
    padding: 56px 0 28px;
  }
  .footer-grid{
    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 36px;
  }
  .footer-brand .brand{ margin-bottom: 12px; }
  .footer-brand p{
    color: var(--ink-soft);
    font-size: 14.5px;
    max-width: 32ch;
  }
  .footer-col h4{
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .footer-col ul{
    list-style: none;
    margin: 0;
    padding: 0;
    display:flex;
    flex-direction: column;
    gap: 10px;
  }
  .footer-col a{
    text-decoration: none;
    color: var(--ink-soft);
    font-size: 14.5px;
  }
  .footer-col a:hover{ color: var(--berry); }
  .footer-bottom{
    display:flex;
    justify-content: space-between;
    align-items:center;
    flex-wrap: wrap;
    gap: 16px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 13px;
  }
  .motion-toggle{
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
  }
  .motion-toggle:hover{
    border-color: var(--berry);
    color: var(--berry);
  }
  .footer-toggles{
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  /* ==========================================================
     Bewegungs-Effekte
     Alle sind an html.js gekoppelt: ohne laufendes Skript ist der
     Endzustand sichtbar, nichts kann dadurch verschwinden.
     html.no-motion schaltet sie wieder ab (Schalter im Footer und
     Systemeinstellung "Bewegung reduzieren").
     ========================================================== */

  /* --- 1. Fortschrittsbalken oben --- */
  .scroll-progress{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 3px;
    background: var(--berry);
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 300;          /* über dem Header (100) */
    pointer-events: none;
  }

  /* --- 2. Pfeil an den Buttons --- */
  .btn::after{
    content: "\2192";       /* Pfeil nach rechts */
    display: inline-block;
    margin-left: 9px;
    transition: transform .2s ease;
  }
  .btn:hover::after{ transform: translateX(4px); }

  /* --- 3. Linie zeichnet sich im Ablauf --- */
  html.js .process-step::before{
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .55s ease;
  }
  html.js .process.is-visible .process-step::before{ transform: scaleX(1); }
  html.js .process.is-visible .process-step:nth-child(2)::before{ transition-delay: .12s; }
  html.js .process.is-visible .process-step:nth-child(3)::before{ transition-delay: .24s; }
  html.js .process.is-visible .process-step:nth-child(4)::before{ transition-delay: .36s; }
  html.no-motion .process-step::before{ transform: none !important; }

  /* --- 5. Wechselndes Wort in der Überschrift --- */
  /* Jeder Teil der Überschrift bekommt eine eigene Zeile. Sonst verschiebt ein
     langes Wort wie "Webauftritt" den Umbruch und die ganze Überschrift springt. */
  .hero h1 .h1-main,
  .hero h1 .h1-rotator-line,
  .hero h1 .accent{ display: block; }

  .rotator{
    display: inline-block;
    white-space: nowrap;
    vertical-align: top;
  }
  .rotator-word{ display: inline-block; }
  /* Die Breite wandert mit, damit der Rest des Satzes nicht springt. */
  html.js .rotator{ transition: width .35s ease; }
  html.js .rotator-word{ transition: opacity .25s ease, transform .25s ease; }
  html.js .rotator-word.out{ opacity: 0; transform: translateY(-.25em); }
  html.js .rotator-word.in{ opacity: 0; transform: translateY(.25em); }

  /* --- 4. Versetztes Einblenden von Karten --- */
  html.js .stagger > *{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .45s ease;
  }
  html.js .is-visible .stagger > *,
  html.js .stagger.is-visible > *{
    opacity: 1;
    transform: none;
  }
  html.js .is-visible .stagger > *:nth-child(2){ transition-delay: .08s; }
  html.js .is-visible .stagger > *:nth-child(3){ transition-delay: .16s; }
  html.js .is-visible .stagger > *:nth-child(4){ transition-delay: .24s; }
  html.no-motion .stagger > *{ opacity: 1 !important; transform: none !important; }


  @media (max-width: 800px){
    .footer-grid{ grid-template-columns: 1fr; gap: 28px; }
    .footer-bottom{ flex-direction: column; align-items:flex-start; text-align:left; }
    .hero .wrap{ grid-template-columns: 1fr; }
    .phone{ order: -1; margin: 0 auto 12px; }
    .why .wrap{ grid-template-columns: 1fr; }
    .process-steps{ grid-template-columns: 1fr 1fr; }
    .contact .wrap{ grid-template-columns: 1fr; }
    .service-row{ grid-template-columns: 1fr; gap: 10px; }
    .price-row{ grid-template-columns: 1fr; gap: 6px; }
    .nav-toggle{ display:flex; }
    /* Menü klappt weich auf statt plötzlich zu erscheinen. visibility statt
       display, weil sich display nicht animieren lässt — geschlossen ist es
       trotzdem unsichtbar, nicht anklickbar und für Screenreader weg. */
    .nav-links{
      display:flex;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-10px) scale(.97);
      transform-origin: top right;
      transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
      position: absolute;
      top: calc(100% + 12px);
      left: 0;
      right: 0;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      box-shadow: 0 16px 34px -14px rgba(var(--shadow),0.3);
      z-index: 200;
    }
    .nav-links.open{
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: none;
      transition: opacity .2s ease, transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s;
    }
    .nav-links a{
      margin-left: 0;
      text-align: left;
      width: 100%;
    }
    /* Die Menüpunkte gleiten kurz nacheinander herein */
    .nav-links > *{
      opacity: 0;
      transform: translateY(-6px);
      transition: opacity .2s ease, transform .25s ease;
    }
    .nav-links.open > *{ opacity: 1; transform: none; }
    .nav-links.open > :nth-child(2){ transition-delay: .04s; }
    .nav-links.open > :nth-child(3){ transition-delay: .08s; }
    .nav-links.open > :nth-child(4){ transition-delay: .12s; }
    .nav-links.open > :nth-child(5){ transition-delay: .16s; }

    /* Die drei Striche werden beim Öffnen zu einem X */
    .nav-toggle line{
      transform-origin: 12px 12px;
      transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s ease;
    }
    .nav-toggle[aria-expanded="true"] line:nth-child(1){ transform: rotate(45deg) translateY(6px); }
    .nav-toggle[aria-expanded="true"] line:nth-child(2){ opacity: 0; transform: scaleX(.2); }
    .nav-toggle[aria-expanded="true"] line:nth-child(3){ transform: rotate(-45deg) translateY(-6px); }
  }
  /* ==========================================================
     Vedera — mehrseitige Fassung
     Angelehnt an kräftige Agentur-Seiten: große Grotesk-Überschriften,
     schwebende Menüleiste, große dunkle Karten, Schnellkontakt am Handy.
     Farben bleiben Blau/Rot — passend zu Aptec und unterscheidbar von
     den Vorbildern.
     ========================================================== */

  /* --- zusätzliche Farbwerte: dunkle Flächen (Karten, Aufruf-Block) --- */
  :root{
    --strong-bg: #14171F;
    --strong-ink: #F5F6F8;
    --strong-soft: #B6BDC9;
    --radius-l: 28px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --strong-bg: #1C2130;
      --strong-soft: #A3ACBB;
    }
  }
  :root[data-theme="dark"]{
    --strong-bg: #1C2130;
    --strong-soft: #A3ACBB;
  }

  /* --- Schrift: kräftige Grotesk für Überschriften --- */
  h1, h2, h3, .display{
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 800;
    letter-spacing: -0.03em;
  }
  h3{ font-weight: 700; letter-spacing: -0.01em; }
  .hero h1{ font-size: clamp(42px, 6.2vw, 74px); line-height: 1.02; }
  /* Die kursive Zeile bleibt als Akzent in der Serifenschrift */
  .hero h1 .accent{
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  /* Wort und Komma auf derselben Grundlinie — mit der schweren Schrift
     rutschte das Komma bei "top" sichtbar nach unten. */
  .rotator{ vertical-align: baseline; }
  .section-head h2{ font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; }
  .kicker,
  .section-head .kicker{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 12px;
  }

  /* --- Buttons als Pillen --- */
  .btn{ border-radius: 999px; font-weight: 600; }
  .btn-light{ background: var(--strong-ink); color: var(--strong-bg); }
  .btn-light:hover{ transform: translateY(-1px); }
  .btn-outline-light{ border-color: var(--strong-soft); color: var(--strong-ink); }
  .btn-outline-light:hover{ background: var(--strong-ink); color: var(--strong-bg); }

  /* --- "Zum Inhalt springen" für Tastatur und Screenreader --- */
  .skip-link{
    position: absolute;
    left: 12px;
    top: -80px;
    z-index: 600;
    padding: 10px 16px;
    border-radius: 12px;
    background: var(--ink);
    color: var(--paper);
    font-weight: 600;
    text-decoration: none;
  }
  .skip-link:focus{ top: 12px; }

  /* --- Menüleiste: schwebende Pille --- */
  header.site-header{
    top: 12px;
    margin: 12px 16px 0;
    padding: 10px 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: box-shadow .2s ease, background .2s ease;
  }
  @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
    header.site-header{
      background: color-mix(in srgb, var(--paper) 86%, transparent);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
    }
  }
  header.site-header.scrolled{ box-shadow: 0 14px 34px -18px rgba(var(--shadow),0.35); }
  header.site-header .wrap{ padding: 0 12px 0 20px; }
  .nav-cta{ border-radius: 999px; }
  nav a[aria-current="page"]{
    color: var(--ink);
    background: var(--paper-2);
    border-color: var(--line);
  }

  /* --- Logo: Zeichen als SVG, passt sich hell/dunkel automatisch an --- */
  .brand{
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
  }
  .brand-mark{ width: 34px; height: 34px; flex-shrink: 0; display: block; }
  .brand-mark .ring{ fill: none; stroke: var(--berry); stroke-width: 3; }
  .brand-mark .v{ fill: none; stroke: var(--mustard); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
  .brand-name{ font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
  .footer-brand .brand{ margin-bottom: 14px; }
  .footer-brand .brand-mark{ width: 30px; height: 30px; }

  /* --- Kopfbereich der Unterseiten --- */
  .page-hero{ padding: 72px 0 44px; }
  .page-hero h1{
    font-size: clamp(40px, 6.6vw, 80px);
    line-height: 1;
    letter-spacing: -0.04em;
    max-width: 17ch;
  }
  .page-hero .lead{
    margin-top: 22px;
    font-size: 19px;
    color: var(--ink-soft);
    max-width: 58ch;
  }
  .page-hero .lead + .lead{ margin-top: 14px; }
  .page-hero .hero-actions{ flex-wrap: wrap; }

  /* --- Startseite: Kundenlogos direkt unter dem Hero --- */
  .clients .wrap{ max-width: 1080px; }
  .clients{ padding-top: 68px; }
  .seite-start .clients{ padding-top: 0; }

  /* --- Leistungen als große Karten --- */
  .service-cards{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .service-card{
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 320px;
    padding: 36px 34px;
    border-radius: var(--radius-l);
    background: var(--strong-bg);
    color: var(--strong-ink);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
  }
  .service-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 26px 50px -26px rgba(var(--shadow),0.6);
  }
  .service-card-nr{
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--strong-soft);
  }
  .service-card-title{
    font-size: clamp(40px, 5.4vw, 68px);
    font-weight: 900;
    line-height: .95;
    letter-spacing: -0.045em;
    text-transform: uppercase;
  }
  .service-card-text{ font-size: 16.5px; color: var(--strong-soft); max-width: 34ch; }
  .service-card-link{ margin-top: auto; font-weight: 700; }
  .service-card-link::after{
    content: "\2192";
    display: inline-block;
    margin-left: 9px;
    transition: transform .2s ease;
  }
  .service-card:hover .service-card-link::after{ transform: translateX(4px); }

  /* --- Ansprechpartner --- */
  .contact-person-card{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: center;
    padding: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-l);
    background: var(--paper-2);
  }
  .contact-person-photo{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 22px;
  }
  .contact-person-text h2{ font-size: clamp(30px, 3.8vw, 44px); }
  .contact-person-text .team-role{ margin-top: 4px; }
  .contact-person-text p{ margin-top: 14px; color: var(--ink-soft); max-width: 46ch; }
  .contact-person-text .hero-actions{ margin-top: 24px; flex-wrap: wrap; }

  /* --- Aufruf-Block am Seitenende --- */
  .cta-card{
    padding: 60px 52px;
    border-radius: 32px;
    background: var(--strong-bg);
    color: var(--strong-ink);
  }
  .cta-card h2{ font-size: clamp(34px, 5vw, 62px); line-height: 1; letter-spacing: -0.04em; }
  .cta-card p{ margin-top: 16px; font-size: 18px; color: var(--strong-soft); }
  .cta-card .hero-actions{ margin-top: 30px; flex-wrap: wrap; }

  /* --- Über uns: Namensgeschichte --- */
  .name-story{ border-top: 1px solid var(--line); }
  .name-story .wrap{ max-width: 68ch; }
  .name-story h2{ font-size: clamp(30px, 3.8vw, 44px); }
  .name-story p{ margin-top: 14px; font-size: 18px; color: var(--ink-soft); }

  /* --- Kontaktseite --- */
  .contact-direct h2{ font-size: clamp(26px, 3vw, 34px); }
  .form-note{ margin: 0; font-size: 13px; color: var(--ink-soft); }
  .form-note a{ color: var(--ink); }

  /* --- Rechtstexte als eigene Seite --- */
  .legal-page{ padding: 60px 0 80px; }
  .legal-page .wrap{ max-width: 78ch; }
  .legal-page h1{
    margin-bottom: 30px;
    font-size: clamp(34px, 5vw, 56px);
    letter-spacing: -0.04em;
  }
  .legal-page p{ margin: 0 0 16px; color: var(--ink-soft); line-height: 1.7; }
  .legal-page strong{ color: var(--ink); }
  .legal-page .legal-note{
    margin-top: 30px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 14px;
    font-style: italic;
  }

  /* --- Fußbereich: vier Spalten --- */
  @media (min-width: 801px){
    .footer-grid{ grid-template-columns: 1.4fr 1fr 1fr 1.25fr; }
  }

  /* --- Schnellkontakt-Leiste am Handy --- */
  .mobile-cta{ display: none; }

  /* --- Englisch gespeichert: Seite kurz verbergen, bis die Texte getauscht
         sind. Falls das Skript gar nicht läuft, zeigt eine CSS-Animation
         die Seite nach 1,5 Sekunden trotzdem an. --- */
  html.lang-pending body{
    visibility: hidden;
    animation: sprach-notfall 0s linear 1.5s forwards;
  }
  @keyframes sprach-notfall{ to{ visibility: visible; } }

  @media (max-width: 800px){
    header.site-header{ top: 8px; margin: 8px 8px 0; border-radius: 22px; }
    header.site-header .wrap{ padding: 0 8px 0 16px; }
    .page-hero{ padding: 48px 0 28px; }
    .service-cards{ grid-template-columns: 1fr; }
    .service-card{ min-height: 0; padding: 30px 26px; border-radius: 24px; }
    .contact-person-card{ grid-template-columns: 1fr; gap: 22px; padding: 24px; }
    .contact-person-photo{ max-width: 180px; }
    .cta-card{ padding: 38px 26px; border-radius: 24px; }

  }

  /* Schnellkontakt-Leiste unten: nur auf Geräten, die per Finger bedient
     werden (Handy, iPad). Auf Laptops mit schmalem Fenster wäre ein
     Anruf-Knopf nutzlos — Windows-Rechner können gar nicht telefonieren. */
  @media (max-width: 800px) and (pointer: coarse){
    .mobile-cta{
      position: fixed;
      left: 10px;
      right: 10px;
      bottom: calc(10px + env(safe-area-inset-bottom));
      z-index: 140;
      display: flex;
      gap: 10px;
    }
    /* überschreibt die allgemeine Regel "nav a" für das Hauptmenü */
    .mobile-cta a{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 52px;
      margin: 0;
      padding: 0 18px;
      border-radius: 999px;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      box-shadow: 0 16px 32px -16px rgba(var(--shadow),0.55);
    }
    .mobile-cta .mobile-cta-call{
      flex: 0 0 40%;
      background: var(--paper);
      color: var(--ink);
      border: 1px solid var(--line);
    }
    .mobile-cta .mobile-cta-request{
      background: var(--berry);
      color: var(--paper);
      border: 1px solid var(--berry);
    }
    /* Hover des Hauptmenüs ("nav a:not(.nav-cta):hover") hier neutralisieren */
    .mobile-cta a.mobile-cta-call:hover{ background: var(--paper); color: var(--ink); border-color: var(--line); }
    .mobile-cta a.mobile-cta-request:hover{ background: var(--berry); color: var(--paper); border-color: var(--berry); }
    .mobile-cta svg{ width: 18px; height: 18px; }

    /* Platz lassen, damit die Leiste nichts verdeckt — auch wenn der Browser
       selbst zu einem Element scrollt (Tastatur, Formularfehler, Sprungmarke) */
    body{ padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
    html{ scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
    .to-top{ bottom: calc(82px + env(safe-area-inset-bottom)); }
  }

  /* ==========================================================
     Touch-Geräte (iPhone, iPad, Android)
     (pointer: coarse) trifft Finger, nicht Maus — die Desktop-
     Gestaltung bleibt davon unberührt.
     ========================================================== */
  @media (pointer: coarse){
    /* Unter 16px zoomt iOS Safari beim Antippen ins Formular hinein
       und die Seite bleibt verschoben zurück. */
    input, textarea, select{ font-size: 16px; }

    /* Antippflächen vergrößern — Apple empfiehlt rund 44px Höhe.
       Die Abstände bleiben optisch gleich, nur der treffbare Bereich wächst. */
    .footer-col ul{ gap: 0; }
    .footer-col a{ display: block; padding: 11px 0; }
    .contact-links a{ padding: 15px 0; }
    .faq-item{ padding: 0; }
    .faq-item summary{ padding: 16px 0; }
    .faq-item p{ padding-bottom: 16px; }
    .lang-current{ padding: 12px 14px; }
    .lang-options button{ padding: 12px; }
    .nav-toggle{ padding: 12px; margin-left: 4px; }
    .motion-toggle{ padding: 13px 16px; }
    .brand{ padding: 6px 0; }
    .team-card .team-email a,
    .team-card .team-phone a{ display: inline-block; padding: 10px 0; }
    .team-card .team-phone{ gap: 0; }
  }

  /* Geräte ohne echten Mauszeiger: Ein Tipp löst sonst den Hover-Zustand aus,
     der danach hängen bleibt, bis man woanders hintippt. */
  @media (hover: none){
    .btn-primary:hover{ background: var(--berry); transform: none; }
    .btn-ghost:hover{ background: transparent; color: var(--ink); }
    .btn:hover::after{ transform: none; }
    .service-card:hover{ transform: none; box-shadow: none; }
    .service-card:hover .service-card-link::after{ transform: none; }
    .btn-light:hover{ transform: none; }
    .btn-outline-light:hover{ background: transparent; color: var(--strong-ink); }
    .nav-cta:hover{ background: var(--ink); }
    .to-top:hover{ background: var(--ink); }
    .lang-current:hover{ border-color: var(--line); color: var(--ink-soft); }
    .motion-toggle:hover{ border-color: var(--line); color: var(--ink-soft); }
    .footer-col a:hover{ color: var(--ink-soft); }
  }

  /* ==========================================================
     Sehr schmale Bildschirme (iPhone SE, iPhones mit "Größere
     Anzeige", kleine Android-Handys — ab 320px Breite)
     ========================================================== */
  /* Notnagel für alle Größen: Ein einzelnes Wort, das länger ist als die
     Zeile, wird umbrochen, statt über den Bildschirmrand zu ragen. */
  h1, h2, h3{ overflow-wrap: break-word; }

  @media (max-width: 400px){
    .wrap{ padding: 0 18px; }
    header.site-header .wrap{ padding: 0 6px 0 12px; }
    /* "Anfragen" steht am Handy ohnehin groß in der Leiste unten */
    header.site-header .nav-cta{ display: none; }
    .hero h1{ font-size: 36px; }
    .page-hero h1{ font-size: 36px; }
    .legal-page h1{ font-size: 27px; }
    .section-head h2{ font-size: 30px; }
    .cta-card h2{ font-size: 32px; }
    .service-card-title{ font-size: 38px; }
  }

  /* Buttons nie mitten im Text umbrechen: passen zwei nicht nebeneinander,
     rutscht der zweite in die nächste Zeile. */
  .btn{ white-space: nowrap; }
  .hero-actions{ flex-wrap: wrap; }
  /* Handy: Buttons untereinander über die volle Breite */
  @media (max-width: 480px){
    .hero-actions{ flex-direction: column; align-items: stretch; }
    .hero-actions .btn{ text-align: center; white-space: normal; }
  }

  /* Preistabelle: Preis immer in einer Zeile, auch bei iPad-Breite */
  .price-row .amount{ white-space: nowrap; }
  @media (min-width: 801px) and (max-width: 1024px){
    .price-row{ grid-template-columns: 1.1fr 1fr 1.9fr; gap: 18px; }
  }
  @media (max-width: 360px){
    .cta-card{ padding: 32px 18px; }
    .contact-person-card{ padding: 22px 18px; }
    .btn{ padding: 13px 18px; font-size: 14px; }
  }

  /* Über uns: Foto füllt den Kreis ganz aus (der Innenabstand stammte vom
     früheren Platzhaltertext) */
  .team-photo{ padding: 0; }
  .team-photo img{ border-radius: 50%; }
  /* Team-Karte bündig unter der Überschrift statt irgendwo in der Mitte */
  .team-grid{ grid-template-columns: repeat(auto-fill, minmax(200px, 240px)); }
  /* "Warum Vedera?" beginnt links bündig wie alle anderen Abschnitte;
     nur die Zeilenlänge bleibt angenehm kurz */
  .name-story .wrap{ max-width: 1080px; }
  .name-story .wrap > *{ max-width: 68ch; }

  /* Überschriften gleichmäßig auf die Zeilen verteilen, damit kein einzelnes
     Wort allein in der letzten Zeile steht (ältere Browser ignorieren das) */
  h1, h2, h3{ text-wrap: balance; }

  /* Sprachmenü: die gerade gewählte Sprache wird nicht noch einmal angeboten */
  .lang-options button[hidden]{ display: none; }

  /* Tschechische Großbuchstaben tragen Akzente (Í, Ě, Č …) — bei sehr engem
     Zeilenabstand stoßen sie an die Zeile darüber */
  html[lang="cs"] .service-card-title{ line-height: 1.1; }

  /* Tschechisch: Preis in Kronen, darunter klein der Euro-Betrag */
  .price-row .amount .price-alt{ display: block; margin-top: 2px; }
  .price-row .amount .price-alt:empty{ display: none; }

  /* Preistabelle: alle Zeilen teilen sich exakt dieselben Spaltenbreiten
     (minmax(0,…) verhindert, dass ein langer Preis seine Zeile verschiebt).
     Der Preis selbst bricht nie um, der Zusatz "einmalig" darf in die
     nächste Zeile rutschen. */
  @media (min-width: 801px){
    .price-row{ grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1.8fr); }
    .price-row .amount{ white-space: normal; }
    .price-row .amount strong{ white-space: nowrap; }
  }

  /* Fußbereich: Überschriften sind jetzt h2 (Screenreader springen sonst von
     h2 auf h4). Aussehen bleibt unverändert. */
  .footer-col h2.footer-h{
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0;
    margin: 0 0 14px;
    text-wrap: auto;
  }

  /* Der Hauptbereich ist nur Ziel des Sprung-Links; er soll dabei keinen
     Rahmen bekommen (Tastatur-Nutzer sehen den Fokus an den Elementen). */
  main:focus{ outline: none; }