/* =============================
TischPilot – Zentrales Stylesheet
Fokus: klare Typo, starke Kontraste, saubere Abstände,
gutes Mobile-Layout, bessere Fokus-/Hover-States
============================= */

:root{
--fg: #ffffff;
--fg-dim:#dfe7ee;
--bg: #ffffff;
--accent:#D3AF37;
--accent-ink:#081013;
--glass: rgba(255,255,255,.07);
--glass-stroke: rgba(255,255,255,.10);
--glass-strong: rgba(255,255,255,.12);
--radius: 16px;
--shadow: 0 10px 30px rgba(0,0,0,.22);
--container: 1160px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
font-family:"Segoe UI","Inter",system-ui,-apple-system,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
.tp-hero-bg{width:100%;height:100%;object-fit:cover}
:focus
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hidden{display:none !important}

.topbar{position:fixed;top:0;left:0;transform:none;width:100%;height:64px;z-index:50;border-radius:0;overflow:hidden;background:#ffffff;box-shadow:0 8px 18px rgba(0,0,0,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.topbar-inner{width:90%;height:100%;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;color:var(--fg);text-decoration:none;font-weight:700;letter-spacing:.2px}
.brand img{height:40px}
.nav a{color:#25303b;text-decoration:none;margin-left:16px;font-weight:500}
.nav a:hover{color:#0f172a}
.nav a.nav-muted{color:#7a8591;font-weight:300}
.nav a.nav-muted:hover{color:#65717d}
.btn-small{padding:8px 14px;border:0;border-radius:10px;margin-left:18px;color:#fff;background:var(--accent)}
.menu-toggle{display:none;appearance:none;border:0;background:transparent;padding:6px;cursor:pointer}
.menu-toggle span{display:block;width:22px;height:2px;background:#111827;border-radius:2px}
.menu-toggle span + span{margin-top:5px}
.mobile-menu{display:none}
.mobile-menu.is-open{display:block}

.container{max-width:var(--container);margin:0 auto;padding:0 18px}
.grid{display:grid;gap:22px}
.grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:980px){.grid.cols-3{grid-template-columns:1fr 1fr}}
@media (max-width:768px){
  .grid.cols-3{grid-template-columns:1fr}
  .topbar{position:sticky;top:0;height:auto;overflow:visible}
  .topbar-inner{width:90%;height:56px}
  .nav{display:none}
  .menu-toggle{display:block}
  .mobile-menu{
    position:static;
    width:100vw;
    margin-left:calc(50% - 50vw);
    background:#ffffff;
    border-top:1px solid #e5e7eb;
    border-left:0;
    border-right:0;
    border-bottom:1px solid #e5e7eb;
    border-radius:0;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
    padding:8px 16px;
    z-index:70;
  }
  .mobile-menu a{
    display:block;
    padding:10px 12px;
    color:#111827;
    text-decoration:none;
    border-radius:8px;
  }
  .mobile-menu a.mobile-menu__login{
    background:var(--accent);
    color:#fff;
    text-align:center;
    font-weight:600;
  }
  .mobile-menu a + a{margin-top:4px}
  .mobile-menu a:hover{background:#f3f4f6}
  .mobile-menu a.mobile-menu__login:hover{background:var(--accent)}
}

.hero{position:relative;min-height:100vh;display:grid;place-items:center;isolation:isolate;overflow:hidden}
.bg {
  position: absolute;
  top: 72px;
  bottom: 1.5%;
  left: 50%;
  width: 98%;
  z-index: -2;
  background: url('../images/bg-desktop.webp') center center / cover no-repeat;
  transform: translateX(-50%);
  border-radius: 24px;
  overflow: hidden;
  will-change: transform;
}

/* Für mobile Geräte & Silk (kein fixed möglich) */
@media (max-width: 1024px), (pointer: coarse) {
  .bg {
    background-attachment: scroll !important;
    background-image: url('../images/bg-desktop.webp');
  }
}

/* Zusätzlicher Fallback: falls Silk 'fixed' blockiert, erzwinge Sichtbarkeit */
@supports not (background-attachment: fixed) {
  .bg {
    background-attachment: scroll;
  }
}

/* Weiße Punktwolke über dem Hero-Bild */
.hero::before{
  content:"";
  position:absolute;
  top: 72px;
  bottom: 1.5%;
  left: 50%;
  width: 98%;
  transform: translateX(-50%);
  border-radius: 24px;
  overflow: hidden;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle, rgba(255,255,255,.40) 0 1.15px, transparent 1.5px) 0 0 / 16px 16px;
  opacity:.68;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 44%, transparent 84%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, #000 44%, transparent 84%);
}

.scrim {
  position: absolute;
  top: 72px;
  bottom: 1.5%;
  left: 50%;
  width: 98%;
  transform: translateX(-50%);
  border-radius: 24px;
  z-index: 0;
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(0,0,0,.10), transparent 55%),
    linear-gradient(to bottom, rgba(0,0,0,.12), rgba(0,0,0,.35));
}

.hero-content{position:relative;z-index:2;text-align:center;max-width:1800px;padding:100px 22px 64px}
.title{margin:0 0 12px;font-size:clamp(38px,7vw,76px);line-height:1.05;font-weight:800;letter-spacing:.3px}
.title-line{display:inline-block;opacity:0;transform:translateY(16px) scale(.99);
text-shadow:0 6px 30px rgba(0,0,0,.45);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.delay-1{animation-delay:.10s}.delay-2{animation-delay:.20s}
.subtitle{margin:10px auto 28px;font-size:clamp(16px,2.2vw,21px);color:var(--fg);max-width:720px}

.search {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: nowrap;            /* => verhindert Umbruch */
  gap: 0;
  flex-direction: row;
  margin-top: 34px;
}

.search-field-wrap{
  position:relative;
  flex:1 1 auto;
  min-width:360px;
  max-width:480px;
}

.search .search-field-wrap input[type=text] {
  height: 64px;
  padding: 0 22px;
  border-radius: 999px 0 0 999px;
  border: 0;
  border-right: 0;
  background: #ffffff;
  color: #000;
  caret-color: var(--accent);
  font-size: 1.1rem;
  width:100%;
  box-shadow: none;
  transition: border-color 0.2s ease;
}

.search .search-field-wrap input[type=text]:focus {
  border: 0;
  box-shadow: none;
  outline: none;
}

.search-suggestions{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  right:0;
  display:grid;
  gap:6px;
  padding:8px;
  border-radius:24px;
  background:#ffffff;
  border:1px solid rgba(17,24,39,.08);
  box-shadow:0 22px 44px rgba(0,0,0,.14);
  z-index:30;
}

.search-suggestion{
  width:100%;
  appearance:none;
  border:0;
  border-radius:18px;
  background:transparent;
  text-align:left;
  padding:12px 14px;
  cursor:pointer;
  color:#111827;
}

.search-suggestion:hover,
.search-suggestion.is-active{
  background:#f5f1e8;
}

.search-suggestion__label{
  display:block;
  font-weight:700;
  color:#111827;
}

.search-suggestion__meta{
  display:block;
  margin-top:4px;
  font-size:.88rem;
  color:#6b7280;
}

.search .btn,
.search .btn.ghost {
  height: 64px;                 /* gleiche Höhe wie das Feld */
  padding: 0 8px;
  min-width: 74px;
  color: #fff;
  cursor: pointer;
  font-size: 1.05rem;
  border-radius: 0 999px 999px 0;
  border-left: 0;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.search .btn svg,
.search .btn.ghost svg {
  transition: transform .15s ease;
}

.search .btn:hover,
.search .btn.ghost:hover,
.search .btn:active,
.search .btn.ghost:active {
  transform: none;
  filter: none;
  box-shadow: var(--shadow);
}

.search .btn:hover svg,
.search .btn.ghost:hover svg {
  transform: scale(1.26);
}

/* Auf sehr kleinen Geräten umbrechen (sonst zu eng) */
@media (max-width: 600px) {
  .search {
    flex-wrap: nowrap;
  }
  .search .search-field-wrap,
  .search .search-field-wrap input[type=text],
  .search .btn,
  .search .btn.ghost {
    width: auto;
  }
}



.btn{display:inline-block;padding:14px 24px;border-radius:var(--radius);border:2px solid transparent;background:var(--accent);
color:var(--accent-ink);font-weight:750;text-decoration:none;box-shadow:var(--shadow);transition:transform .12s ease,filter .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 12px 34px rgba(0,0,0,.28)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--fg);border-color:rgba(255,255,255,.85);box-shadow:none}
.btn.small{padding:10px 16px;font-size:.95rem}

.trust-row{display:flex;gap:18px;justify-content:center;margin-top:16px;opacity:.92;flex-wrap:wrap}
.trust-row > div{padding:6px 10px;border:1px solid var(--glass-stroke);border-radius:999px;background:var(--glass)}

/* Scroll-Indikator (zentriert, klickbar, SVG) */
.scroll-indicator{
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  color: var(--fg);
  background: rgba(0,0,0,.25);
  border: 1px solid var(--glass-stroke);
  text-decoration: none;
  opacity: .9;
  animation: arrow-bounce 1.8s ease-in-out infinite;
  transition: filter .2s ease, transform .1s ease;
}
.scroll-indicator:hover { filter: brightness(1.15); }
.scroll-indicator:active { transform: translateX(-50%) scale(.98); }
.scroll-indicator svg { display:block; }

/* sanfte Bounce-Animation */
@keyframes arrow-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* Respektiert reduzierte Bewegungen */
@media (prefers-reduced-motion: reduce){
  .scroll-indicator { animation: none; }
}


.section{padding:72px 0}
.section .container{padding-top:0}
.section.alt{background:linear-gradient(to bottom, rgba(0,0,0,.62), #0b0f14 30%)}
.h2{margin:0 0 24px;font-size:clamp(22px,4.2vw,32px);text-align:center}
.centered{text-align:center}

.split-intro{
  width:min(1500px, 92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 1fr);
  gap:40px;
  align-items:center;
  position:relative;
  overflow:visible;
}

.split-intro__text{
  text-align:left;
}

.split-intro__title{
  margin:0 0 30px;
  font-size:clamp(30px, 3.6vw, 46px);
  line-height:1.08;
  color:#000000;
  margin-left:0;
  max-width:28ch;
  padding-left:0;
}

.split-intro__copy{
  margin:0;
  font-size:1rem;
  font-weight:400;
  line-height:1.55;
  color:#000000;
  max-width:68ch;
  padding-left:0;
}

.split-intro__copy + .split-intro__copy{
  margin-top:14px;
}

.split-intro__media{
  margin:0;
  border-radius:24px;
  overflow:hidden;
}

.split-intro__media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.card{background:var(--glass);border:1px solid var(--glass-stroke);border-radius:var(--radius);padding:20px;backdrop-filter:blur(8px);box-shadow:var(--shadow)}
.features.grid{max-width:var(--container);margin:0 auto}
.features .card h3{margin:0 0 8px;font-size:20px}
.features .card p{margin:0;color:var(--fg-dim);line-height:1.55}

.cards.grid{max-width:var(--container);margin:0 auto}
.place{display:grid;grid-template-columns:160px 1fr;gap:16px;align-items:center}
.place .thumb{aspect-ratio:16/10;border-radius:12px;background:linear-gradient(135deg,#334,#556)}
.place .info h3{margin:0 0 6px;font-size:18px}
.place .info p{margin:0 0 12px;color:var(--fg-dim)}

.testimonials.grid{max-width:var(--container);margin:0 auto}
.testimonials blockquote{margin:0;font-style:italic}
.testimonials footer{margin-top:10px;color:var(--fg-dim)}

.cta-band{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));text-align:center}

.footer{
  background:#ffffff;
  color:#0b0f14;
  border-top:4px solid var(--accent);
  position:relative;
}

.footer--full{
  padding:0;
}

.footer-edge-icon{
  position:absolute;
  top:0;
  left:50px;
  width:84px;
  height:auto;
  display:block;
}

.footer-wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:40px 18px 28px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-areas:
    "brand brand brand"
    "nav legal business";
  gap:26px;
}

.footer-brand{
  grid-area:brand;
  display:grid;
  gap:14px;
  align-content:start;
  border-bottom:1px solid #e5e5e5;
  padding-bottom:18px;
}

.footer-col--nav{
  grid-area:nav;
}

.footer-col--legal{
  grid-area:legal;
}

.footer-col--business{
  grid-area:business;
}

.footer-logo-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#000;
}

.footer-logo{
  width:160px;
  height:auto;
}

.footer-copy{
  margin:0;
  max-width:none;
  color:#2f2f2f;
  line-height:1.55;
  text-align:justify;
}

.footer-col{
  display:grid;
  gap:9px;
  align-content:start;
}

.footer-col h3{
  margin:0 0 4px;
  font-size:.92rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#000000;
}

.footer-col a{
  color:#121212;
  text-decoration:none;
  font-weight:400;
}

.footer-col a:hover{
  color:#8a6f1a;
}

.footer-link-btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  text-align:left;
  font:inherit;
  color:#121212;
  font-weight:400;
  cursor:pointer;
}

.footer-link-btn:hover{
  color:#8a6f1a;
}

.footer-bottom{
  border-top:1px solid #e5e5e5;
  padding:16px 18px 20px;
  text-align:center;
  color:#353535;
}

.edge-signature{
  position:fixed;
  right:-128px;
  top:50%;
  transform:translateY(-50%) rotate(90deg);
  display:flex;
  align-items:center;
  gap:12px;
  z-index:30;
  pointer-events:none;
}

.edge-signature__line{
  width:86px;
  height:1px;
  background:#000000;
  opacity:.7;
}

.edge-signature__text{
  font-size:.8rem;
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#000000;
  opacity:.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

@media (prefers-reduced-motion: reduce){.title-line,.scroll-indicator{animation:none}}

@keyframes rise{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes arrow-bounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

.title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  max-width: min(95vw, 1800px); /* breiter, bleibt aber responsive */
  line-height: 1.15;
  padding: 0 10px;
}

/* Titel-Container: keine Lücke zwischen Text und Cursor */
.title-box{
  display:inline-flex;
  align-items:baseline;
  flex-wrap:wrap;          /* 2 Zeilen erlaubt */
  white-space:normal;
  gap:0;                   /* wichtig: sonst kann der Cursor „abfallen“ */
}

#dynamicTitle{
  white-space: pre-line;
}

/* Cursor am Textende */
#dynamicTitle::after{
  content: "|";
  display: inline-block;
  margin-left: 6px;
  color: var(--accent);
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink { to { visibility: hidden; } }


.cursor {
  display: inline-block;
  margin-left: 6px;
  color: var(--accent);
  font-weight: 400;
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink { to { visibility: hidden; } }

@media (max-width: 768px) {
  .title {
    max-width: 90vw;       /* auf Tablets etwas kleiner */
  }
}

@media (max-width: 480px) {
  .title-box {
    max-width: 90vw;       /* auf sehr kleinen Displays dynamisch */
  }
}


/* === Stabilisiert die Hero-Breite, unabhängig vom Titel === */
.hero-content{
  max-width: none !important;
  width: min(1100px, 92vw) !important;   /* feste, responsive Breite */
  margin: 0 auto;
  display: grid;
  justify-items: center;
  row-gap: 18px;
}

/* Titel nimmt volle Breite ein, springt nicht */
.hero .title{ 
  width: 100% !important;
  margin: 0 auto;
}

/* Titelbox darf breit sein, aber nicht den Container dehnen */
.hero .title-box{
  width: auto;
  max-width: 1000px;                     /* groß genug für 1 Zeile, sonst weicher Umbruch */
  white-space: normal;                   /* 2-zeilig erlaubt */
  flex-wrap: wrap;
  word-break: keep-all;   /* keine Wortteilung mitten im Wort */
  hyphens: none;
}


/* Suchzeile bekommt eigene feste Breite, bleibt stabil */
.hero .search{
  width: min(900px, 100%);               /* unabhängig vom Titel */
}

/* Input bleibt flexibel, Buttons brechen nicht (wie zuvor) */
.hero .search input[type=text]{ flex: 1 1 auto; min-width: 360px; max-width: 480px; }
.hero .search .btn{ flex: 0 0 auto; }


/* Reserviert etwas Höhe für den Titelbereich */
.hero .title { min-height: 2.8em; }      /* passt für 1–2 Zeilen bei deiner Schriftgröße */


/* Erste Zeile fix oben, Platz für bis zu 2 Zeilen reserviert */
.hero .title{
  line-height: 1.05;
  display: flex;
  align-items: flex-start;        /* erste Zeile bleibt oben */
  justify-content: center;
  min-height: calc(2 * 1.05em);   /* Platz für 2 Zeilen */
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

/* Titel-Box breit genug; zweizeilig erlaubt, ohne das Layout zu verschieben */
.hero .title-box{
  max-width: 100%;
  white-space: normal;            /* 2 Zeilen erlaubt */
  flex-wrap: wrap;
  gap: 0;                         /* wichtig: kein Gap zum Cursor */
}

/* Optional: auf sehr kleinen Screens weniger Reservierung, damit es nicht zu luftig wirkt */
@media (max-width: 480px){
  .hero .title{ min-height: calc(1.6 * 1.05em); } /* ~1–2 Zeilen */
}


/* Cursor am Textende (Pseudo-Element) */
#dynamicTitle::after{
  content: "";
  display: inline-block;
  width: 0.09em;
  height: 0.778em;
  margin-left: 6px;
  color: var(--accent);
  background: var(--accent);
  border-radius: 1px;
  vertical-align: 0.00em;
  animation: blink 1s steps(2,start) infinite;
}
@keyframes blink { to { visibility:hidden; } }

/* ===== Mobile-Optimierung Landingpage ===== */
@media (max-width: 768px) {
  .topbar {
    position: sticky;
    top: 0;
    height: auto;
    padding: 0;
    overflow: visible;
  }

  .brand img {
    height: 34px;
  }

  .hero {
    min-height: 100dvh;
  }

  .hero-content {
    width: 96vw !important;
    padding: 40px 12px 28px;
    row-gap: 14px;
  }

  .bg,
  .hero::before,
  .scrim{
    top: 16px;
  }

  .hero .title {
    font-size: clamp(30px, 9vw, 44px);
    min-height: calc(1.8 * 1.05em);
  }

  .hero .title-box {
    max-width: 100%;
  }

  .subtitle {
    margin: 4px auto 18px;
    font-size: clamp(15px, 4.1vw, 18px);
    line-height: 1.4;
  }

  .hero .search {
    width: 100%;
    gap: 0;
  }

  .hero .search input[type=text] {
    min-width: 0;
    max-width: none;
    height: 56px;
    font-size: 1rem;
    padding: 0 16px;
  }

  .hero .search .btn,
  .hero .search .btn.ghost {
    height: 56px;
    min-width: 64px;
    padding: 0 6px;
    font-size: 1rem;
  }

  .trust-row {
    gap: 10px;
    margin-top: 8px;
  }

  .trust-row > div {
    font-size: .92rem;
    padding: 6px 10px;
  }

  .scroll-indicator {
    bottom: 16px;
    width: 42px;
    height: 42px;
  }

  .section {
    padding: 52px 0;
  }

  .card {
    padding: 16px;
  }

  .split-intro{
    grid-template-columns:1fr;
    gap:24px;
  }

  .split-intro__title{
    font-size:clamp(30px, 8vw, 42px);
  }

  .footer-wrap{
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "nav"
      "legal"
      "business";
    gap:20px;
    padding:28px 16px 20px;
  }

  .footer-copy{
    max-width:none;
  }

  .footer-col a,
  .footer-link-btn{
    text-align:center;
  }

  .footer-col h3{
    text-align:center;
  }

  .edge-signature{
    display:none;
  }

}

@media (max-width: 600px) {
  .hero .search {
    flex-wrap: nowrap;
  }

  .hero .search input[type=text],
  .hero .search .btn,
  .hero .search .btn.ghost {
    width: auto;
    min-width: 0;
    max-width: none;
    flex: 1 1 auto;
  }

  .hero .search input[type=text] {
    border-radius: 999px 0 0 999px;
  }

  .hero .search .btn,
  .hero .search .btn.ghost {
    flex: 0 0 64px;
    border-radius: 0 999px 999px 0;
  }
}

@media (max-width: 420px) {
  .hero .title {
    font-size: clamp(27px, 10.2vw, 34px);
  }

  .subtitle br {
    display: none;
  }
}