/* Selbst gehostete Schriften (keine Verbindung zu Google) */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/CormorantGaramond.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url('fonts/CormorantGaramond-Italic.woff2') format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Jost.woff2') format('woff2')}
@font-face{font-family:'Syne';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/Syne.woff2') format('woff2')}
/* ------------------------------------------------------------------
     MEINL RESTAURIERUNG — Design-Token
     Weiß · Schwarz · Terrakotta – abgeleitet aus dem Logo (Schiff / Wortmarke).
     ------------------------------------------------------------------ */
  :root{
    --paper:#FFFFFF;      /* Weiß – Grundton (Logo-Hintergrund) */
    --paper-2:#F6F4F0;    /* Warmweiß – Bänder */
    --tan:#EFE9DF;        /* Firmen-Tan, aufgehellt – Sektion Über uns */
    --ink:#141210;        /* Schwarz – Überschriften (Logo-Wortmarke) */
    --text:#2A2622;       /* Fließtext */
    --muted:#6B665F;      /* Nebentext (Logo-Grau) */
    --accent:#DC5C22;     /* Terrakotta-Orange – Logo-Schiff */
    --accent-text:#B9481A;/* Orange, dunkler – für kleine Schrift */
    --accent-soft:rgba(220,92,34,.10);
    --line:rgba(20,18,16,.14);
    --line-strong:rgba(20,18,16,.34);
    --font-display:'Cormorant Garamond',Georgia,'Times New Roman',serif;
    --font-body:'Jost','Futura','Helvetica Neue',Arial,sans-serif;
    --container:1200px;
    --pad:clamp(20px,4vw,48px);
    color-scheme:light;
  }

  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:var(--font-body);
    font-weight:300;
    font-size:16px;
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  :focus-visible{outline:1px solid var(--accent-text);outline-offset:4px}
  ::selection{background:var(--accent-soft);color:var(--ink)}

  /* ---------- Typografie ---------- */
  .kicker{
    font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:.32em;
    text-transform:uppercase;color:var(--accent-text);margin:0;
  }
  h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;text-wrap:balance;color:var(--ink)}
  .h2{font-size:clamp(34px,4.6vw,58px);line-height:1.08;letter-spacing:-.005em}
  .h3{font-size:clamp(22px,2.2vw,28px);line-height:1.2}
  .lede{font-size:clamp(17px,1.4vw,19px);line-height:1.75;color:var(--text);max-width:62ch}
  .muted{color:var(--muted)}
  p{margin:0}

  /* Stratigraphie-Ornament: vier Schichten, wie eine Fassungsabfolge */
  .strata{display:flex;flex-direction:column;gap:4px;width:64px;margin:0 0 22px}
  .strata i{display:block;height:1px;background:var(--ink)}
  .strata i:nth-child(1){width:100%;background:var(--ink)}
  .strata i:nth-child(2){width:72%;background:var(--accent)}
  .strata i:nth-child(3){width:88%;background:var(--muted)}
  .strata i:nth-child(4){width:52%;background:var(--line-strong)}
  .center .strata{margin-left:auto;margin-right:auto;align-items:center}

  .section-head{display:grid;gap:18px;max-width:760px;margin-bottom:clamp(44px,6vw,80px)}
  .section-head .kicker{margin-bottom:-6px}

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:12px;
    font-family:var(--font-body);font-weight:400;font-size:12px;letter-spacing:.24em;text-transform:uppercase;
    padding:17px 34px;border:1px solid var(--ink);transition:background .25s,color .25s,border-color .25s;
    white-space:nowrap;
  }
  .btn-gold{background:var(--ink);color:#fff;border-color:var(--ink)}
  .btn-gold:hover{background:var(--accent);border-color:var(--accent)}
  .btn-line{color:var(--ink)}
  .btn-line:hover{border-color:var(--accent);color:var(--accent-text);background:var(--accent-soft)}

  /* ---------- Navigation ---------- */
  .nav{
    position:fixed;inset:0 0 auto 0;z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:22px var(--pad);
    transition:background .35s,padding .35s,border-color .35s;
    border-bottom:1px solid transparent;
  }
  .nav.solid{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);padding:12px var(--pad);border-color:var(--line)}
  .brand{
    display:flex;align-items:center;gap:12px;
    font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);
    opacity:0;transform:translateY(-4px);transition:opacity .4s,transform .4s;
  }
  .brand img{height:34px;width:auto}
  .brand small{font-family:var(--font-body);font-weight:400;letter-spacing:.3em;color:var(--muted);margin-left:2px;font-size:10px}
  .nav.solid .brand{opacity:1;transform:none}
  .nav-links{display:flex;align-items:center;gap:36px;margin:0;padding:0;list-style:none}
  .nav-links a{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(31,26,21,.78);font-weight:400;transition:color .2s}
  .nav-links a:hover{color:var(--accent-text)}
  .nav-links .cta{border:1px solid var(--ink);padding:11px 20px;color:var(--ink)}
  .nav-links .cta:hover{background:var(--ink);color:#fff}
  .burger{display:none;background:none;border:1px solid var(--line-strong);color:var(--ink);width:44px;height:44px;cursor:pointer;padding:0}
  .burger span{display:block;width:18px;height:1px;background:currentColor;margin:4px auto}
  .mobile-menu{
    position:fixed;inset:0;z-index:49;background:rgba(255,255,255,.98);
    display:none;flex-direction:column;align-items:center;justify-content:center;gap:28px;
    padding:80px var(--pad);
  }
  .mobile-menu.open{display:flex}
  .mobile-menu a{font-family:var(--font-display);font-size:30px;color:var(--text)}
  .mobile-menu a:hover{color:var(--accent-text)}
  .mobile-menu .btn{margin-top:12px;font-family:var(--font-body);font-size:12px}

  /* ---------- Hero: Logo als Briefkopf, darunter das Bild ---------- */
  .hero{
    position:relative;display:grid;place-items:center;
    padding:150px var(--pad) 70px;text-align:center;isolation:isolate;
  }
  .frame{position:absolute;inset:22px;border:1px solid var(--line);pointer-events:none;z-index:1}
  .hero-inner{position:relative;z-index:2;max-width:900px;display:grid;justify-items:center;gap:22px}
  .logo-hero{width:clamp(240px,34vw,420px);height:auto;margin:6px 0 4px}
  .hero-line{font-family:'Syne',var(--font-body);font-weight:500;font-size:clamp(17px,2.1vw,26px);line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);max-width:34ch;text-wrap:balance}
  .hero-line b{font-weight:600;color:var(--accent-text)}
  .hero-sub{font-size:15px;line-height:1.8;color:var(--muted);max-width:56ch}
  .hero-cta{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:14px}
  .hero-photo{padding:0 var(--pad) 0}
  .hero-photo .photo{aspect-ratio:16/9;max-width:var(--container);margin:0 auto}
  .hero-photo img{animation:kenburns 26s ease-in-out infinite alternate;transform-origin:50% 45%;object-position:50% 45%}
  @keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.06)}}
  .scroll-hint{display:none}

  /* ---------- Layout ---------- */
  .container{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
  section{padding:clamp(80px,10vw,140px) 0}
  .band{background:var(--paper-2)}
  .hr{height:1px;background:var(--line);margin:0 auto;max-width:var(--container)}

  /* Platzhalter-Fläche für Projektfotos: heller Kalkputz mit Streiflicht */
  .ph{
    position:relative;overflow:hidden;
    background:
      radial-gradient(120% 90% at 22% 12%,rgba(255,255,255,.6),transparent 58%),
      radial-gradient(80% 60% at 85% 95%,rgba(220,92,34,.10),transparent 60%),
      linear-gradient(158deg,#ECE7DF 0%,#DCD5CA 55%,#C9C0B3 100%);
  }
  .ph::before{
    content:"";position:absolute;inset:0;opacity:.45;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.33 0 0 0 0 0.18 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .ph::after{
    content:attr(data-label);position:absolute;left:18px;bottom:16px;
    font-family:var(--font-body);font-weight:400;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
    color:rgba(20,18,16,.55);
  }
  .photo{position:relative;margin:0;overflow:hidden;background:var(--paper-2)}
  .photo .ph,.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .photo.framed::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.7);pointer-events:none}

  /* ---------- Anspruch ---------- */
  .anspruch .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center}
  .anspruch .photo{aspect-ratio:4/5}
  .anspruch .grid-2{grid-template-columns:.95fr 1.05fr}
  .anspruch .grid-2 .photo{aspect-ratio:3/4}
  .stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(56px,7vw,96px);
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  }
  .stat{padding:28px 24px;border-left:1px solid var(--line)}
  .stat:first-child{border-left:0;padding-left:0}
  .stat b{display:block;font-family:var(--font-display);font-weight:400;font-size:clamp(34px,3.6vw,46px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
  .stat span{display:block;margin-top:10px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

  /* ---------- Leistungen ---------- */
  .services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,64px)}
  .service{padding:30px 0 36px;border-top:1px solid var(--line);transition:border-color .3s}
  .service:hover{border-top-color:var(--ink)}
  .service h3{font-size:26px;line-height:1.15;margin-bottom:12px}
  .service p{font-size:14.5px;line-height:1.75;color:var(--muted)}
  .service .tag{display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-text);margin-bottom:14px}

  /* ---------- Vorgehen (echte Abfolge → römische Nummern) ---------- */
  .process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
  .step{padding:0 clamp(20px,3vw,40px) 8px;border-left:1px solid var(--line)}
  .step:first-child{border-left:0;padding-left:0}
  .step .num{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:.3em;color:var(--accent-text);display:block;margin-bottom:22px}
  .step h3{font-size:24px;margin-bottom:12px}
  .step p{font-size:14.5px;color:var(--muted)}

  /* ---------- Referenzen ---------- */
  .refs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:clamp(20px,2.6vw,36px)}
  .ref{display:grid;gap:16px;align-content:start}
  .ref .photo{aspect-ratio:4/3;transition:transform .5s}
  .ref .meta{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-text)}
  .ref h3{font-size:25px;line-height:1.15}
  .ref p{font-size:14.5px;color:var(--muted);max-width:52ch}
  .ref.featured{grid-column:span 2}
  .ref.featured .photo{aspect-ratio:16/9}
  .ref.featured h3{font-size:30px}
  .ref.more{align-content:stretch}
  .ref-more{
    border:1px solid var(--line-strong);padding:clamp(28px,3vw,40px);display:grid;align-content:end;gap:14px;height:100%;min-height:320px;
  }
  .ref-more .btn{white-space:normal;text-align:center;line-height:1.5;padding:14px 22px}
  .ref-more b{font-family:var(--font-display);font-weight:400;font-size:clamp(44px,5vw,64px);line-height:1;color:var(--ink)}
  .ref-more span{font-size:14px;color:var(--muted)}
  .note-line{margin-top:40px;font-size:13px;color:var(--muted);letter-spacing:.02em}

  /* ---------- Technologie ---------- */
  .tech{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,44px) clamp(20px,2.6vw,36px)}
  .tech-item{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:1px solid var(--line)}
  .tech-img{position:relative;aspect-ratio:4/3;background:#fff;border:1px solid var(--line);overflow:hidden;margin-bottom:6px}
  .tech-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:10%;box-sizing:border-box}
  .tech-img .ph{position:absolute;inset:0}
  .tech-img.photo-fill img{object-fit:cover;padding:0}
  .tech b{display:block;font-family:var(--font-body);font-weight:500;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink);line-height:1.5}
  .tech p{font-size:14px;color:var(--muted)}
  .tech-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:end;margin-bottom:clamp(44px,6vw,72px)}

  /* ---------- Über uns (helle Sektion) ---------- */
  .about{background:var(--tan)}
  .about .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px);align-items:center}
  .about .photo{aspect-ratio:3/4}
  .about blockquote{
    margin:34px 0 0;padding:26px 0 0;border-top:1px solid var(--line-strong);
    font-family:var(--font-display);font-style:italic;font-weight:300;font-size:clamp(22px,2.2vw,28px);line-height:1.35;color:var(--ink);max-width:30ch;
  }
  .creds{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;padding:0;list-style:none}
  .creds li{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
  .creds li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--accent);transform:rotate(45deg);margin-right:12px;vertical-align:middle}
  .vdr{display:flex;align-items:center;gap:22px;margin-top:34px;padding:22px 0 0;border-top:1px solid var(--line-strong);text-decoration:none}
  .vdr-logo{flex:0 0 auto;display:grid;place-items:center;padding:14px 18px;background:#fff;border:1px solid var(--line)}
  .vdr-logo img{height:40px;width:auto;display:block}
  .vdr span.t{font-size:14px;line-height:1.5;color:var(--text);min-width:0}
  .vdr span.t b{display:block;font-family:var(--font-display);font-weight:600;font-size:19px;color:var(--ink)}
  .vdr:hover span.t b{color:var(--accent-text)}
  .profiles{display:flex;flex-wrap:wrap;gap:14px 28px;margin-top:22px}
  .profiles a{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line-strong);padding-bottom:6px}
  .profiles a:hover{color:var(--accent-text);border-color:var(--accent)}

  /* ---------- Kontakt ---------- */
  .contact .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,110px)}
  .contact dl{margin:36px 0 0;display:grid;grid-template-columns:auto 1fr;gap:18px 32px}
  .contact dt{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-text);padding-top:6px}
  .contact dd{margin:0;font-size:16px;line-height:1.6}
  .contact dd a:hover{color:var(--accent-text)}
  .socials{display:flex;gap:26px;margin-top:34px}
  .socials a{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:6px}
  .socials a:hover{border-color:var(--ink)}
  form{display:grid;gap:26px;margin-top:8px}
  .field{display:grid;gap:8px}
  .field label{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent-text)}
  .field input,.field textarea{
    background:transparent;border:0;border-bottom:1px solid var(--line-strong);color:var(--text);
    font-family:var(--font-body);font-weight:300;font-size:16px;padding:10px 0;border-radius:0;
  }
  .field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--ink)}
  .field textarea{min-height:110px;resize:vertical}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
  .form-foot{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .form-foot small{font-size:12px;color:var(--muted)}

  /* ---------- Auszeichnungen & Partner ---------- */
  .partners{padding:clamp(56px,7vw,90px) 0;border-top:1px solid var(--line)}
  .p-row{display:grid;grid-template-columns:220px 1fr;gap:24px clamp(24px,4vw,64px);align-items:center;padding:26px 0}
  .p-row + .p-row{border-top:1px solid var(--line)}
  .p-logos{display:flex;flex-wrap:wrap;align-items:center;gap:22px clamp(28px,4vw,56px)}
  .p-logos img{display:block;height:44px;width:auto;max-width:170px;object-fit:contain}
  .p-logos.awards img{height:64px;max-width:200px}
  .p-logos.mono img{filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
  .p-logos.mono span:hover img{filter:none;opacity:1}
  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:40px 0 44px}
  .foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
  .foot .brand-f{display:flex;align-items:center;gap:12px;font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)}
  .foot .brand-f img{height:30px;width:auto}
  .foot p{font-size:12px;color:var(--muted);letter-spacing:.04em}
  .foot nav{display:flex;gap:26px}
  .foot nav a{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
  .foot nav a:hover{color:var(--ink)}
  .foot .credits{flex-basis:100%;font-size:11px;color:var(--muted);margin-top:6px}
  .foot .credits a{text-decoration:underline}

  /* ---------- Responsiv ---------- */
  @media (max-width:1024px){
    .services{grid-template-columns:repeat(2,minmax(0,1fr))}
    .process{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 0}
    .step:nth-child(3){border-left:0;padding-left:0}
    .tech{grid-template-columns:repeat(2,minmax(0,1fr))}
    .tech-intro{grid-template-columns:1fr}
    .refs{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (max-width:820px){
    .nav-links{display:none}
    .burger{display:block}
    .anspruch .grid,.about .grid,.contact .grid{grid-template-columns:1fr}
    .anspruch .photo{aspect-ratio:4/3;order:-1}
    .anspruch .grid-2 .photo{aspect-ratio:4/5;max-width:420px}
    .about .photo{max-width:420px}
    .stats{grid-template-columns:repeat(2,1fr)}
    .stat{padding:22px 18px}
    .stat:nth-child(odd){border-left:0;padding-left:0}
    .stat:nth-child(n+3){border-top:1px solid var(--line)}
    .frame{inset:12px}
    .hero{padding:110px var(--pad) 50px}
    .hero-photo .photo{aspect-ratio:4/3}
    .hero-photo img{animation:none}
  }
  @media (max-width:600px){
    .services,.refs,.process{grid-template-columns:1fr}
    .step{border-left:0;padding-left:0}
    .tech{grid-template-columns:1fr}
    .row2{grid-template-columns:1fr}
    .vdr{flex-direction:column;align-items:flex-start;gap:16px}
    .vdr-logo img{max-width:100%;height:auto;max-height:40px}
    .ref.featured{grid-column:span 1}
    .ref.featured .photo{aspect-ratio:4/3}
    .ref.featured h3{font-size:25px}
    .contact dl{grid-template-columns:1fr;gap:6px 0}
    .contact dd{margin-bottom:14px}
    .foot{flex-direction:column;align-items:flex-start}
    .p-row{grid-template-columns:1fr;gap:16px}
    .p-logos img{height:44px;max-width:140px}
    .p-logos.awards img{height:60px}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .hero-photo img{animation:none}
    *{transition:none!important}
  }

  /* ---------- Datenschutz-Hinweis (keine Tracking-Cookies) ---------- */
  .notice{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line-strong);box-shadow:0 10px 40px rgba(20,18,16,.12);padding:18px 20px;display:none;gap:14px;align-items:center;flex-wrap:wrap}
  .notice.show{display:flex}
  .notice p{font-size:13px;line-height:1.55;color:var(--text);flex:1 1 300px;margin:0}
  .notice p a{text-decoration:underline}
  .notice .btn{padding:12px 20px;font-size:11px}
  /* ---------- Unterseiten (Impressum, Datenschutz) ---------- */
  .page{padding:150px 0 90px}
  .page .container{max-width:820px}
  .page h1{font-size:clamp(36px,5vw,56px);line-height:1.08;margin-bottom:28px}
  .page h2{font-size:26px;margin:40px 0 12px}
  .page h3{font-size:20px;margin:26px 0 8px;font-family:var(--font-body);font-weight:500}
  .page p,.page li{font-size:16px;line-height:1.75;color:var(--text)}
  .page p{margin-bottom:14px}
  .page ul{padding-left:20px;margin:0 0 14px}
  .page a{color:var(--accent-text);text-decoration:underline}
  .page .meta-line{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:40px}
  .page address{font-style:normal}
  .field.consent{grid-template-columns:auto 1fr;gap:12px;align-items:start}
  .field.consent input{width:18px;height:18px;margin-top:3px;accent-color:var(--ink)}
  .field.consent label{font-size:13px;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.5}
  .field.consent label a{text-decoration:underline}