.container{
    padding-left: clamp(20px, 5vw, 5cm);
    padding-right: clamp(20px, 5vw, 5cm);
	}
   :root{
      --bg: #ffffff;
      --bg-soft: #f6f7f9;
      --text: #101828;
      --muted: #475467;
      --line: #e4e7ec;
      --card: #ffffff;
      --shadow: 0 10px 30px rgba(16,24,40,0.08);
      --radius: 18px;

      --maxw: 1080px;
      --pad-x: clamp(16px, 4vw, 28px);
      --pad-y: clamp(18px, 4vw, 36px);

      --h1: clamp(34px, 4vw, 54px);
      --h2: clamp(22px, 2.2vw, 30px);
      --h3: 18px;
      --p: 16px;

      --lh: 1.6;
      --focus: 0 0 0 4px rgba(45, 90, 255, 0.18);

      /*
        ======================================================================
        OPTION: Abstand Logo ↔ Text in den Kacheln (GLOBAL)
        Zweck:
          - Steuert den Abstand zwischen Icon/Logo links und dem Textblock rechts
        Änderung:
          - Dieser Wert wirkt auf ALLE Kacheln – außer dort, wo überschrieben
            (siehe .tile--utileads weiter unten).
        ======================================================================
      */
      --tile-text-gap: 16px; /* <-- HIER global ändern (z.B. 12px oder 18px) */
    }

    *{ box-sizing:border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      padding-top: 72px; /* Höhe der Topbar (fixierter Header) */
      background: var(--bg);
      color: var(--text);
      font: 400 var(--p)/var(--lh) system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    a{ color: inherit; text-decoration: none; }
	
	
main p a,
main .tile__url,
footer a{
  background: rgba(255, 221, 87, 0.35);
  padding: 1px 4px;
  border-radius: 5px;
}

main p a:hover,
main a.tile:hover .tile__url,
footer a:hover{
  background: rgba(255, 221, 87, 0.55);
}
	
	
    a:focus-visible{ outline:none; box-shadow: var(--focus); border-radius: 10px; }

    .wrap{
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 var(--pad-x);
    }

    .section{
      padding: var(--pad-y) 0;
    }
    .section--soft{
      background: var(--bg-soft);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .kicker{
      display:inline-flex;
      gap:10px;
      align-items:center;
      padding: 6px 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,0.65);
      backdrop-filter: blur(6px);
      font-size: 13px;
    }

    h1{
      font-size: var(--h1);
      line-height: 1.05;
      margin: 14px 0 12px;
      letter-spacing: -0.02em;
    }
    h2{
      font-size: var(--h2);
      line-height: 1.15;
      margin: 0 0 14px;
      letter-spacing: -0.01em;
    }
    h3{
      font-size: var(--h3);
      margin: 0 0 8px;
    }
    p{
      margin: 0 0 12px;
      color: var(--muted);
    }

      /*
      ======================================================================
      BLOCK: TOPBAR (fixiert)
      Zweck:
        - Header bleibt beim Scrollen sichtbar
        - Transparenter Hintergrund mit Blur (Executive Look)
      ======================================================================
    */

.topbar{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

    .topbar__in{
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px var(--pad-x);
      max-width: var(--maxw);
      margin: 0 auto;
    }
    .brand{
      display:flex;
      align-items: baseline;
      gap: 10px;
      white-space: nowrap;
    }
    .brand__name{
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .brand__tag{
      font-size: 13px;
      color: var(--muted);
      border-left: 1px solid var(--line);
      padding-left: 10px;
      margin-left: 4px;
    }

    .nav{
      display:flex;
      gap: 4px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .nav a{
      font-size: 14px;
      color: var(--muted);
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid transparent;
    }
    .nav a:hover{
      color: var(--text);
      border-color: var(--line);
      background: rgba(246,247,249,0.8);
    }

    .hero{
      padding: clamp(28px, 5vw, 58px) 0;
    }
    .hero__grid{
      display:grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: clamp(18px, 4vw, 34px);
      align-items: start;
    }
    @media (max-width: 920px){
      .hero__grid{ grid-template-columns: 1fr; }
    }

    .hero__card{
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: clamp(18px, 3.5vw, 28px);
    }
    .hero__lead{
      font-size: 18px;
      color: var(--muted);
      margin-top: 10px;
      max-width: 62ch;
    }
    .hero__eyebrow{
      display: inline-block;
      margin: 0 0 6px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--muted);
    }

    .ctaRow{
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 18px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--text);
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    }
    .btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 10px 22px rgba(16,24,40,0.08);
      background: rgba(246,247,249,0.75);
    }
    .btn--primary{
      background: var(--text);
      color: #fff;
      border-color: var(--text);
    }
    .btn--primary:hover{
      background: #0b1220;
    }


    /*
      ======================================================================
      BLOCK: CTA BUTTON VARIANTS (Hero + Kontakt)
      Ziel:
        - Zwei Buttons mit klar unterschiedlicher Psychologie:
          * Explore (leicht, neugierig)  -> "Themen"
          * Dialog  (ruhig, verbindlich) -> "Vorhaben besprechen"
      Hinweis:
        - Basis-Button bleibt .btn, Varianten setzen nur Farben/Details.
      ======================================================================
    */
    /* Themen – helles Pastellblau */
.btn--explore{
  background: #e6f2ff;       /* sehr helles Blau */
  color: #1d4ed8;            /* klares Blau für Text */
  border-color: #cfe4ff;
}

.btn--explore:hover{
  background: #d6e9ff;
}


/* Vorhaben besprechen – etwas dunkleres Pastellblau */
.btn--dialog{
  background: #c7dcff;       /* dunkler als oben */
  color: #0b3a82;            /* dunkles Blau */
  border-color: #a9c8ff;
}

.btn--dialog:hover{
  background: #b4d0ff;
}


    /* kleiner Pfeil (SVG) – Executive Micro-Interaction */
    .chev{
      display:inline-flex;
      align-items:center;
    }

    .chev__icon{
      width:16px;
      height:16px;
      overflow: visible;
      transform: translateX(0);
      transition: transform .18s ease;
    }

    /* "Luxus": die Linie wird beim Hover minimal länger */
    .chev__shaft{
      transform-origin: 5px 12px; /* Startpunkt der Linie */
      transform-box: fill-box;
      transform: scaleX(1);
      transition: transform .18s ease;
    }

    .btn:hover .chev__icon{
      transform: translateX(2px);
    }
    .btn:hover .chev__shaft{
      transform: scaleX(1.08);
    }

    /* Up-Variante: keine Verlängerung, nur minimaler Lift */
    .chev__icon--up{ transition: transform .18s ease; }
    .btn:hover .chev__icon--up{
      transform: translateY(-2px);
    }


.asideBox{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      background: linear-gradient(180deg, rgba(246,247,249,0.85), rgba(255,255,255,0.85));
    }
    .asideBox p{ margin-bottom: 10px; }
    .metaList{
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      gap: 10px;
    }
    .metaList li{
      display:flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.7);
    }
    .metaList span{
      color: var(--muted);
      font-size: 14px;
    }
    .metaList strong{
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      text-align: right;
    }

    .quote{
      border-left: 3px solid var(--text);
      padding-left: 14px;
      margin: 0;
    }
    .quote p{
      color: var(--text);
      font-size: 18px;
      margin: 0 0 8px;
    }
    .quote small{
      color: var(--muted);
      font-size: 14px;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
    }
    @media (max-width: 860px){
      .grid2{ grid-template-columns: 1fr; }
    }

    .cards{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    @media (max-width: 1020px){
      .cards{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 560px){
      .cards{ grid-template-columns: 1fr; }
    }

    .card{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--card);
      padding: 16px;
      transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
    }
    .card:hover{
      transform: translateY(-2px);
      box-shadow: 0 12px 26px rgba(16,24,40,0.10);
      background: rgba(255,255,255,0.96);
    }
    .card p{ margin-bottom: 0; }

    .tileGrid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      align-items: stretch;
    }
    @media (max-width: 980px){
      .tileGrid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 620px){
      .tileGrid{ grid-template-columns: 1fr; }
    }

    .tile{
      display:flex;
      flex-direction: column;
      height: 100%;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #fff;
      padding: 16px;
      box-shadow: 0 8px 22px rgba(16,24,40,0.06);
      transition: transform .12s ease, box-shadow .12s ease;
      position: relative;
      overflow: hidden;
    }
    .tile:hover{
      transform: translateY(-2px);
      box-shadow: 0 14px 30px rgba(16,24,40,0.10);
    }
    .tile::before{
      content:"";
      position:absolute;
      left:0; top:0;
      width:100%;
      height:4px;
      background: var(--accent, #101828);
      opacity: 0.9;
    }

    .tile p{
      margin-bottom: 16px;
    }

    .tile > *:last-child{
      margin-bottom: 0;
    }

    .quote-card{
      display: block;
      margin-top: 8px;
    }

    .quote-text{
      margin: 0 0 8px;
      color: var(--text);
      font-style: italic;
    }

    .quote-author{
      font-weight: 700;
      color: var(--text);
      font-size: 14px;
    }

    .quote-sub{
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }



    /*
      ======================================================================
      BLOCK: TILE HEADER (Icon + Titel + Badge)
      Zweck:
        - Saubere Ausrichtung, viel Platz für Titel + Badge
      Wichtig:
        - Hier liegt dein „UtiLeads soll nach links“-Hebel (via --tile-text-gap)
      ======================================================================
    */
    .tile__titleRow{
      display:flex;
      align-items:center;
      gap: var(--tile-text-gap); /* <-- Abstand Icon ↔ Textblock */
      margin-bottom: 12px;
    }

    /*
      ======================================================================
      BLOCK: TILE TOP ROW (Titel + Badge)
      Zweck:
        - NICHT "space-between", weil das Badge sonst nach rechts weggezogen wird
        - Mehr Platz für Badge-Text wie "Unternehmensentwicklung"
      ======================================================================
    */
    .tile__top{
      display:flex;
      align-items:center;
      justify-content: flex-start; /* <-- wichtig: Badge bleibt nah am Titel */
      gap: 10px;
      flex-wrap: wrap;             /* <-- wenn es eng wird: sauber umbrechen */
      margin-bottom: 8px;
    }

    .tile__title{
      font-weight: 800;
      letter-spacing: -0.01em;
    }

    .badge{
      font-size: 12px;
      color: var(--muted);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 4px 10px;
      background: rgba(246,247,249,0.9);
      white-space: nowrap;
    }

    .tile__url{
      font-size: 13px;
      color: var(--muted);
      margin-top: auto;
      padding-top: 14px;
      word-break: break-word;
      align-self: flex-start;
    }

    .tile__icon{
      width: 38px;
      height: 38px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: rgba(246,247,249,0.9);
      display:flex;
      align-items:center;
      justify-content:center;
      flex: 0 0 auto;
      box-shadow: 0 8px 18px rgba(16,24,40,0.06);
    }

    .tile__logo{
      width: 60px;
      height: 60px;
      object-fit: contain;
      display:block;
    }

    /* Gruppierung: pro Domain-Gruppe ein eigenes --accent */
    .tile--consult{ --accent:#1d4ed8; }    /* Beratung & Bewertung */
    .tile--software{ --accent:#0f766e; }   /* Software & Plattformen */
    .tile--community{ --accent:#7c3aed; }  /* Innovation & Community */
    .tile--idee{ --accent:#b45309; }       /* Ideen und Entwicklungen */
    .tile--kreativ{ --accent:#be123c; }    /* Kreativität */

    /*
      ======================================================================
      OPTION: UtiLeads weiter links + mehr Platz für "Unternehmensentwicklung"
      Zweck:
        - Nur UtiLeads bekommt einen kleineren Abstand Icon ↔ Textblock
        - Du kannst hier fein einstellen, ohne andere Kacheln zu ändern
      ======================================================================
    */
    .tile--utileads{
      --tile-text-gap: 6px; /* <-- HIER ändern: 2px..12px je nach Wunsch */
    }

    /* Optional: Badge bei UtiLeads minimal kompakter (falls du mehr Luft willst) */
    .tile--utileads .badge{
      padding: 3px 8px;
      font-size: 11px;
    }

    .footer{
      padding: 26px 0 46px;
      border-top: 1px solid var(--line);
    }
    .footer__row{
      display:flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      align-items:center;
      justify-content: space-between;
      color: var(--muted);
      font-size: 14px;
    }

/* Exakte Sprungkorrektur erfolgt per JavaScript unten */
html{
  scroll-behavior: auto;
}

main{
  padding-bottom: 180px;
}

    .skip{
      position:absolute;
      left:-999px;
      top: 10px;
      background:#fff;
      border: 1px solid var(--line);
      padding: 8px 10px;
      border-radius: 10px;
      z-index: 9999;
    }
    .skip:focus{ left: 10px; box-shadow: var(--focus); }

    .hero__photo{
      width: 100%;
      max-width: 350px;
      display: block;
      border-radius: 20px;
      border: 1px solid var(--line);
      box-shadow: 0 14px 36px rgba(16,24,40,0.14);
      object-fit: cover;
      aspect-ratio: 4 / 5;
      background: #fff;
    }
    .hero__photoWrap{
      display:flex;
      justify-content:flex-end;
      margin-bottom: 14px;
    }
    @media (max-width: 920px){
      .hero__photo{ max-width: 520px; }
      .hero__photoWrap{ justify-content:flex-start; }
    }

    .hero__left{
      display: grid;
      gap: 14px;
      align-content: start;
    }
    .hero__mini{
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: clamp(16px, 3vw, 22px);
    }
    .hero__mini p:last-child{ margin-bottom: 0; }

    .asideBox{ display: grid; gap: 14px; }
    .asideTitle{ margin: 0; font-weight: 800; color: var(--text); }
    .asideDivider{ height: 1px; background: var(--line); margin: 2px 0; border-radius: 999px; }


    /* ================================================================
       MOBILE-OPTIMIERUNG – wirkt ausschließlich bis 700px Breite.
       Die Notebook-/Desktop-Darstellung oberhalb 700px bleibt unverändert.
       ================================================================ */
    @media (max-width: 700px){
      :root{
        --pad-x: 16px;
        --pad-y: 26px;
        --h1: clamp(32px, 10vw, 42px);
        --h2: clamp(24px, 7vw, 30px);
        --h3: 19px;
        --p: 17px;
        --lh: 1.55;
        --radius: 16px;
      }

      html{
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        overflow-x: clip;
      }

      body{
        padding-top: 112px;
        overflow-x: clip;
      }

      img, svg{
        max-width: 100%;
      }

      .topbar{
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .topbar__in{
        display: block;
        padding: 10px 16px 8px;
      }

      .brand{
        display: block;
        white-space: normal;
        line-height: 1.2;
      }

      .brand__name{
        font-size: 18px;
      }

      .brand__tag{
        display: block;
        margin: 3px 0 0;
        padding: 0;
        border-left: 0;
        font-size: 12px;
        line-height: 1.25;
      }

      .nav{
        margin-top: 7px;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 4px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
      }

      .nav::-webkit-scrollbar{ display:none; }

      .nav a{
        flex: 0 0 auto;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        padding: 8px 10px;
        font-size: 14px;
        background: #f6f7f9;
        border-color: var(--line);
      }

      .hero{
        padding: 22px 0 28px;
      }

      .hero__grid,
      .grid2,
      .cards,
      .tileGrid{
        grid-template-columns: minmax(0, 1fr);
      }

      .hero__grid{
        gap: 16px;
      }

      .hero__card,
      .hero__mini,
      .asideBox,
      .card,
      .tile{
        padding: 18px;
      }

      h1{
        line-height: 1.08;
        margin-top: 10px;
        overflow-wrap: anywhere;
      }

      h2{
        line-height: 1.2;
        scroll-margin-top: 125px;
      }

      h3,
      .tile__title{
        overflow-wrap: anywhere;
        hyphens: auto;
      }

      .hero__eyebrow{
        font-size: 13px;
        line-height: 1.4;
      }

      .hero__lead{
        font-size: 17px;
        line-height: 1.55;
      }

      .ctaRow{
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .btn{
        width: 100%;
        min-height: 48px;
        padding: 12px 14px;
        font-size: 16px;
      }

      .hero__photoWrap{
        justify-content: center;
        margin-bottom: 10px;
      }

      .hero__photo{
        width: 100%;
        max-width: 420px;
        height: auto;
        aspect-ratio: 4 / 5;
      }

      .metaList li{
        display: block;
        padding: 12px;
      }

      .metaList span,
      .metaList strong{
        display: block;
        text-align: left;
      }

      .metaList strong{
        margin-top: 3px;
        font-size: 15px;
      }

      .quote p{
        font-size: 17px;
      }

      .kicker{
        max-width: 100%;
        white-space: normal;
        line-height: 1.35;
      }

      .tile{
        min-width: 0;
      }

      .tile__titleRow{
        align-items: flex-start;
        gap: 12px;
      }

      .tile__top{
        gap: 7px;
        margin-bottom: 5px;
      }

      .tile__icon{
        width: 52px;
        height: 52px;
      }

      .tile__logo{
        width: 48px;
        height: 48px;
      }

      .badge{
        max-width: 100%;
        white-space: normal;
        line-height: 1.2;
      }

      .tile p,
      .card p,
      .hero__mini p,
      .section p{
        overflow-wrap: break-word;
        hyphens: auto;
      }

      .tile__url,
      main p a,
      footer a{
        overflow-wrap: anywhere;
        word-break: normal;
      }

      .footer{
        padding: 24px 0 32px;
      }

      .footer__row{
        display: block;
      }

      .footer__row > div + div{
        margin-top: 12px;
      }

      main{
        padding-bottom: 80px;
      }
    }

    @media (max-width: 390px){
      body{ padding-top: 116px; }
      .brand__tag{ font-size: 11px; }
      .nav a{ padding-inline: 9px; font-size: 13px; }
      .hero__card, .hero__mini, .asideBox, .card, .tile{ padding: 16px; }
    }