/*
Theme Name: NTO Signature Masterpiece
Theme URI: https://nto-magdeburg.de
Author: NTO Objektsteuerung & Schadenkoordination
Description: Individuelles Premium-Theme für NTO Objektsteuerung & Schadenkoordination.
Version: 1.0.3
Text Domain: nto-signature-masterpiece
*/
:root{--paper:#f8f5ef;--cream:#eee5d7;--sand:#e4d6c2;--taupe:#cbb99f;--ink:#22201d;--charcoal:#34302b;--muted:#70685e;--gold:#a97835;--line:rgba(34,32,29,.13);--white:#fff;--shadow:0 28px 80px rgba(40,31,21,.11);--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--sans:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.65;text-rendering:optimizeLegibility}img{display:block;max-width:100%;height:auto}a{color:inherit}button,input,textarea{font:inherit}.shell{width:min(1240px,calc(100% - 64px));margin:auto}.eyebrow{margin:0 0 18px;color:var(--gold);font-size:12px;font-weight:750;letter-spacing:.22em;text-transform:uppercase}.site-header{position:fixed;z-index:100;inset:0 0 auto;background:rgba(248,245,239,.92);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.navbar{height:88px;display:flex;align-items:center;gap:30px}.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1;min-width:270px}.brand strong{font-family:var(--serif);font-size:32px;letter-spacing:.16em;font-weight:500}.brand span{font-size:9px;line-height:1.25;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-top:8px}.nav-links{display:flex;justify-content:center;align-items:center;gap:25px;margin-left:auto}.nav-links a{text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}.nav-links a:hover{color:var(--gold)}.nav-button,.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border:1px solid var(--ink);border-radius:999px;text-decoration:none;font-size:13px;font-weight:750;transition:.25s;cursor:pointer}.nav-button,.button-dark{background:var(--ink);color:white}.nav-button:hover,.button-dark:hover{background:var(--gold);border-color:var(--gold);transform:translateY(-2px)}.menu-toggle{display:none;border:0;background:transparent;font-size:25px}.hero{position:relative;min-height:100vh;padding:150px 0 110px;overflow:hidden;background:var(--paper)}.hero-art{position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,245,239,.99) 0%,rgba(248,245,239,.96) 47%,rgba(248,245,239,.58) 74%,rgba(248,245,239,.2) 100%),url('assets/images/nto-signature-bg.jpg') center right/cover no-repeat}.hero-art:after{content:"";position:absolute;right:-160px;top:18%;width:540px;height:540px;border:1px solid rgba(169,120,53,.22);border-radius:50%;box-shadow:0 0 0 95px rgba(169,120,53,.035),0 0 0 190px rgba(169,120,53,.018)}.hero-shell{position:relative}.hero-heading{max-width:860px}.hero h1{font-family:var(--serif);font-size:clamp(68px,7.6vw,116px);font-weight:500;line-height:.91;letter-spacing:-.052em;margin:0}.hero h1 span{display:block;color:var(--gold);font-size:.58em;letter-spacing:-.025em;margin-bottom:12px}.hero-intro{font-family:var(--serif);font-size:clamp(25px,2.6vw,36px);line-height:1.22;max-width:810px;margin:35px 0 0}.timeline{position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto auto auto;gap:18px;margin:72px 0 84px;max-width:1080px}.timeline:before{content:"";position:absolute;left:3%;right:7%;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.4}.moment{position:relative;z-index:1;padding:22px 22px 24px;background:rgba(255,255,255,.78);backdrop-filter:blur(10px);border:1px solid rgba(169,120,53,.16);border-radius:22px;box-shadow:0 14px 42px rgba(41,33,23,.06)}.moment time{display:block;color:var(--gold);font-weight:800;font-size:13px;letter-spacing:.08em;margin-bottom:10px}.moment p{margin:0;font-family:var(--serif);font-size:23px;line-height:1.18}.moment-1{grid-column:1/5;grid-row:1}.moment-2{grid-column:5/9;grid-row:1;transform:translateY(28px)}.moment-3{grid-column:9/13;grid-row:1}.moment-4{grid-column:2/6;grid-row:2;transform:translateY(18px)}.moment-5{grid-column:6/10;grid-row:2;transform:translateY(52px)}.moment-6{grid-column:9/13;grid-row:3}.hero-resolution{max-width:760px;margin-left:8%;padding:50px 54px;background:rgba(248,245,239,.88);border-left:1px solid rgba(169,120,53,.55);box-shadow:0 24px 80px rgba(45,36,26,.06)}.hero-resolution p{font-size:18px;margin:0 0 18px}.hero-resolution .resolution-lead{font-family:var(--serif);font-size:clamp(36px,4vw,55px);line-height:1.04;letter-spacing:-.025em;margin-bottom:30px}.resolution-divider{width:58px;height:1px;background:var(--gold);margin:28px 0}.signature-line{font-family:var(--serif);font-size:31px!important;color:var(--gold);margin:30px 0!important}.section{padding:125px 0}.section-heading{max-width:850px;margin-bottom:62px}.section-heading h2,.outcomes h2,.workflow h2,.profile h2,.closing h2,.contact h2{font-family:var(--serif);font-weight:500;font-size:clamp(46px,5vw,70px);line-height:1.02;letter-spacing:-.035em;margin:0}.section-heading>p:last-child{max-width:760px;color:var(--muted);font-size:19px}.services{background:var(--cream)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}.service-card{border-radius:30px;padding:40px 38px;min-height:620px;display:flex;flex-direction:column;border:1px solid rgba(34,32,29,.08);box-shadow:0 22px 55px rgba(44,35,25,.06);transition:.3s}.service-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.service-primary{background:#403a33;color:white}.service-secondary{background:#e7d9c6}.service-tertiary{background:#faf8f4}.service-top{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:12px;font-weight:800;letter-spacing:.13em}.service-tag{padding:6px 10px;border:1px solid currentColor;border-radius:999px;font-size:9px;text-transform:uppercase}.service-card h3,.model-card h3,.pricing-note h3,.outcome-list h3{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1.05;margin:16px 0}.service-claim{font-family:var(--serif);font-size:26px;line-height:1.18;color:var(--gold);min-height:92px}.service-card>p:not(.service-claim){color:var(--muted)}.service-primary>p:not(.service-claim){color:#ddd5cb}.service-card ul{list-style:none;padding:0;margin:auto 0 0}.service-card li{padding:10px 0;border-bottom:1px solid rgba(34,32,29,.11)}.service-primary li{border-color:rgba(255,255,255,.13)}.service-card li:before{content:"—";color:var(--gold);margin-right:9px}.outcomes{background:var(--paper)}.outcomes-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px;align-items:start}.outcomes-heading{position:sticky;top:125px}.outcome-list article{display:grid;grid-template-columns:58px 1fr;gap:20px;padding:30px 0;border-bottom:1px solid var(--line)}.outcome-list article:first-child{padding-top:0}.outcome-list span{color:var(--gold);font-weight:800;font-size:13px}.outcome-list h3{font-size:30px;margin:0 0 6px}.outcome-list p{margin:0;color:var(--muted)}.workflow{background:#25231f;color:white}.workflow-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:85px;align-items:center}.workflow-copy>p:not(.eyebrow):not(.workflow-signature){color:#d2cbc1;font-size:18px}.workflow-signature{font-family:var(--serif);font-size:40px;color:#d4a459;line-height:1.1}.workflow-card{background:#f7f3ec;color:var(--ink);border-radius:34px;padding:36px}.workflow-card>div{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:20px 10px;border-bottom:1px solid var(--line)}.workflow-card>div:last-child{border-bottom:0}.workflow-card span{color:var(--gold);font-weight:800;font-size:12px}.workflow-card strong{font-family:var(--serif);font-size:24px;font-weight:500}.workflow-card small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.08em}.models{background:var(--cream)}.model-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.model-card{background:#f9f6f0;border:1px solid rgba(34,32,29,.08);border-radius:28px;padding:34px;min-height:265px}.model-card.featured{background:#e2d1b8}.model-card>span{font-size:11px;color:var(--gold);font-weight:800;letter-spacing:.14em;text-transform:uppercase}.model-card p{color:var(--muted)}.pricing-note{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}.pricing-note>div{background:white;border-radius:26px;padding:32px}.pricing-note h3{font-size:31px}.profile{background:var(--paper)}.profile-grid{display:grid;grid-template-columns:.78fr 1.05fr;gap:85px;align-items:center}.profile-photo{max-width:510px}.profile-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 8%;border-radius:28px;box-shadow:var(--shadow)}.profile-copy{max-width:650px}.profile-copy>p:not(.eyebrow){font-size:18px}.profile-copy blockquote{margin:35px 0 0;padding-left:28px;border-left:2px solid var(--gold);font-family:var(--serif);font-size:38px;line-height:1.17;color:var(--gold)}.closing{padding:130px 0;text-align:center;background:#fcfaf6}.closing-inner{max-width:980px}.closing-inner>p:not(.eyebrow){font-size:20px;color:var(--muted);max-width:760px;margin:27px auto}.closing .button{margin-top:15px}.contact{background:var(--cream)}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}.contact-copy{position:sticky;top:125px}.contact-details{margin-top:35px;line-height:1.8}.contact-card{background:white;border-radius:32px;padding:42px;box-shadow:var(--shadow)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.contact-card label{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:700;margin-bottom:18px}.contact-card input,.contact-card textarea{width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;padding:15px}.contact-card textarea{min-height:175px;resize:vertical}.contact-card .consent{display:block;color:var(--muted);font-weight:500;font-size:12px;line-height:1.5}.consent input{width:auto;margin-right:7px}.form-note{color:var(--muted);font-size:12px}.message{padding:14px;border-radius:12px;margin-bottom:18px}.success{background:#e7f3e9}.error{background:#fbe6e1}.footer{background:#1d1b18;color:white;padding:65px 0 28px}.footer-grid{display:grid;grid-template-columns:1.4fr .6fr .6fr;gap:55px}.footer-title{font-family:var(--serif);font-size:37px;line-height:1.15}.footer p{color:#beb7ad;max-width:550px}.footer-location{color:#d7a85e!important}.footer-links{display:flex;flex-direction:column;gap:10px;margin-top:18px}.footer-links a{text-decoration:none;color:#cfc8be}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:50px;padding-top:22px;color:#938c83;font-size:12px}.legal{padding:145px 0 100px}.legal .shell,.legal .container{max-width:900px}.legal h1{font-family:var(--serif);font-size:64px;font-weight:500}.legal h2{font-family:var(--serif);font-size:34px;font-weight:500;margin-top:48px}.legal p{max-width:850px}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:1080px){.brand{min-width:220px}.nav-links{gap:17px}.nav-links a{font-size:12px}.service-grid{grid-template-columns:1fr}.service-card{min-height:auto}.outcomes-layout,.workflow-grid,.profile-grid,.contact-grid{grid-template-columns:1fr}.outcomes-heading,.contact-copy{position:static}.profile-photo{max-width:520px}.timeline{grid-template-columns:1fr 1fr}.moment{grid-column:auto!important;grid-row:auto!important;transform:none!important}}
@media(max-width:820px){.nav-links{display:none;position:absolute;top:78px;left:18px;right:18px;background:white;border-radius:20px;padding:24px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start}.nav-links.open{display:flex}.menu-toggle{display:block;margin-left:auto}.nav-button{display:none}.navbar{height:78px}.brand{min-width:0}.shell{width:min(100% - 36px,1240px)}.hero{padding-top:125px}.timeline{grid-template-columns:1fr}.hero-resolution{margin-left:0;padding:40px 30px}.model-grid,.pricing-note,.form-row,.footer-grid{grid-template-columns:1fr}}
@media(max-width:560px){body{font-size:16px}.brand span{max-width:200px}.hero h1{font-size:58px}.hero-intro{font-size:24px}.timeline{margin:52px 0}.moment p{font-size:21px}.section{padding:88px 0}.section-heading h2,.outcomes h2,.workflow h2,.profile h2,.closing h2,.contact h2{font-size:43px}.service-card{padding:30px 25px}.profile-copy blockquote{font-size:31px}.contact-card{padding:28px 22px}.footer-title{font-size:31px}}



/* =========================================================
   NTO – FINALER FEINSCHLIFF 1.0.3
   ========================================================= */

/* Ruhigere Abschnittsüberschriften */
.section-heading h2,
.outcomes h2,
.workflow h2,
.profile h2,
.contact h2{
  font-size:clamp(36px,3vw,48px)!important;
  line-height:1.10!important;
  letter-spacing:-.025em!important;
  max-width:19ch;
}

.closing h2{
  font-size:clamp(39px,3.35vw,53px)!important;
  line-height:1.09!important;
  letter-spacing:-.026em!important;
  max-width:25ch;
  margin-left:auto;
  margin-right:auto;
}

/* Dezente Hintergrundtiefe */
body{
  background-color:#f8f5ef;
  background-image:
    radial-gradient(circle at 14% 8%,rgba(255,255,255,.72) 0,rgba(255,255,255,0) 31%),
    radial-gradient(circle at 87% 19%,rgba(169,120,53,.045) 0,rgba(169,120,53,0) 29%);
  background-attachment:fixed;
}

/* Modelle gleichwertig darstellen */
.model-card,
.model-card.featured{
  background:#f9f6f0;
}

/* Wärmere Linien und weichere Tiefe */
hr{border-color:rgba(169,120,53,.18)!important}
.time-card,
.service-card,
.workflow-panel,
.contact-form,
.contact-card{
  box-shadow:0 22px 70px rgba(52,43,31,.075),0 2px 8px rgba(52,43,31,.025);
}

/* Rechtliche Seiten ruhiger */
.legal h1{
  font-size:clamp(43px,4vw,54px)!important;
  line-height:1.07!important;
}
.legal h2{
  font-size:clamp(26px,2.3vw,30px)!important;
  line-height:1.20!important;
}
.legal p{line-height:1.72}

@media(max-width:560px){
  .section-heading h2,
  .outcomes h2,
  .workflow h2,
  .profile h2,
  .contact h2{font-size:34px!important}
  .closing h2{font-size:37px!important}
  .legal h1{font-size:42px!important}
  .legal h2{font-size:26px!important}
}

/* NUR Hero-Überschrift dezenter */
.hero h1{
  font-size: clamp(62px, 5.6vw, 88px) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
}

@media (max-width: 560px){
  .hero h1{
    font-size: 52px !important;
  }
}

/* Button „Wie ich Sie entlaste“ ausblenden */
.hero-resolution .button,
.hero-resolution .button-dark,
a[href="#entlastung"].button{
  display: none !important;
}

/* Abstand nach dem entfernten Button sauber schließen */
.hero-resolution{
  padding-bottom: 0 !important;
}

.hero-resolution p:last-of-type{
  margin-bottom: 0 !important;
}

/* NTO – ursprüngliche hochwertige Typografie wiederherstellen */
:root{
  --serif: "Iowan Old Style", "Palatino Linotype",
           Palatino, "Book Antiqua", Georgia, serif;
}

/* Elegante Serifenschrift konsequent wiederherstellen */
.hero h1,
.hero-time,
.section-heading h2,
.outcomes h2,
.workflow h2,
.profile h2,
.closing h2,
.contact h2,
h1, h2, h3{
  font-family: var(--serif) !important;
  font-weight: 400 !important;
}

/* Hero fein und hochwertig */
 .hero h1{
    font-size: clamp(64px, 5.8vw, 92px) !important;
    line-height: .94 !important;
    letter-spacing: -.035em !important;
}
   

 .hero-intro{
    font-family: var(--serif) !important;
    font-weight: 400 !important;
    font-size: clamp(28px, 2.4vw, 34px);
    letter-spacing: -.012em;
    line-height: 1.20;
    max-width: 760px;
}


/* ===== NTO – Typografie ===== */

:root{
  --serif: "Baskerville","Baskerville Old Face","Charter","Cambria",serif;
}

.hero h1,
.hero-time,
.hero-intro,
.section-heading h2,
.outcomes h2,
.workflow h2,
.profile h2,
.closing h2,
.contact h2{
    font-family: var(--serif) !important;
    font-weight: 400 !important;
}

.hero>.shell>.eyebrow,
.hero-shell>.eyebrow{
    display:none !important;
}

/* Menüpunkt „Start“ ausblenden */
.nav-links a:first-child{
  display:none !important;
}

/* Rechte Leistungskarte optisch ausgleichen */
.service-tertiary h3{
  font-size: 30px !important;
  line-height: 1.05 !important;
  max-width: none !important;
  white-space: nowrap;
}

/* =========================================================
   NTO – PREMIUM-HINTERGRÜNDE & TIEFE
   ========================================================= */

/* Grundfläche der gesamten Website */
body{
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.88), transparent 30%),
    radial-gradient(circle at 88% 18%, rgba(169,120,53,.10), transparent 34%),
    linear-gradient(135deg, #f8f5ef 0%, #eee5d7 48%, #f7f2e9 100%);
}

/* Hero: sanftes Licht und mehr räumliche Tiefe */
.hero{
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.90), transparent 35%),
    radial-gradient(circle at 82% 38%, rgba(169,120,53,.12), transparent 35%),
    linear-gradient(125deg, rgba(248,245,239,.98), rgba(234,220,198,.72));
}

/* Leistungsbereich */
.services{
  background:
    radial-gradient(circle at 8% 14%, rgba(255,255,255,.82), transparent 28%),
    radial-gradient(circle at 92% 22%, rgba(169,120,53,.15), transparent 32%),
    radial-gradient(circle at 48% 90%, rgba(255,248,235,.85), transparent 36%),
    linear-gradient(145deg, #eee4d5 0%, #f7f2e9 48%, #e8d7bf 100%) !important;
}

/* Leistungskarten: individuelle, hochwertige Verläufe */
.service-primary{
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.10), transparent 30%),
    radial-gradient(circle at 90% 90%, rgba(169,120,53,.18), transparent 38%),
    linear-gradient(145deg, #484239 0%, #302c27 58%, #41392f 100%) !important;
  box-shadow:
    0 28px 70px rgba(39,31,23,.20),
    inset 0 1px 0 rgba(255,255,255,.10);
}

.service-secondary{
  background:
    radial-gradient(circle at 75% 8%, rgba(255,255,255,.66), transparent 35%),
    radial-gradient(circle at 10% 92%, rgba(169,120,53,.13), transparent 36%),
    linear-gradient(145deg, #eadbc4 0%, #f3e8d7 52%, #dfc7a6 100%) !important;
  box-shadow:
    0 28px 70px rgba(82,60,34,.13),
    inset 0 1px 0 rgba(255,255,255,.60);
}

.service-tertiary{
  background:
    radial-gradient(circle at 78% 10%, rgba(255,255,255,.95), transparent 34%),
    radial-gradient(circle at 8% 90%, rgba(169,120,53,.10), transparent 34%),
    linear-gradient(145deg, #fffdf9 0%, #f7f1e8 56%, #eadbc7 100%) !important;
  box-shadow:
    0 28px 70px rgba(62,48,31,.11),
    inset 0 1px 0 rgba(255,255,255,.88);
}

/* Ergebnisbereich */
.outcomes{
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.88), transparent 30%),
    radial-gradient(circle at 88% 72%, rgba(169,120,53,.12), transparent 34%),
    linear-gradient(135deg, #faf7f1 0%, #eee5d8 50%, #f7f2e9 100%) !important;
}

/* Dunkler Arbeitsweise-Bereich mit Tiefe */
.workflow{
  background:
    radial-gradient(circle at 78% 18%, rgba(169,120,53,.18), transparent 32%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,.05), transparent 30%),
    linear-gradient(140deg, #292621 0%, #1d1b18 55%, #353027 100%) !important;
}

/* Modelle / Preise */
.models{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.85), transparent 32%),
    radial-gradient(circle at 82% 76%, rgba(169,120,53,.13), transparent 35%),
    linear-gradient(135deg, #efe6d9 0%, #f9f5ef 50%, #e4d2b9 100%) !important;
}

/* Über-mich-Bereich */
.profile{
  background:
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.92), transparent 30%),
    radial-gradient(circle at 12% 82%, rgba(169,120,53,.12), transparent 34%),
    linear-gradient(135deg, #f8f4ed 0%, #e9ded0 52%, #f6f0e7 100%) !important;
}

/* Abschlussbereich */
.closing{
  background:
    radial-gradient(circle at 50% 4%, rgba(255,255,255,.92), transparent 32%),
    radial-gradient(circle at 85% 85%, rgba(169,120,53,.15), transparent 36%),
    linear-gradient(145deg, #fbf8f3 0%, #eadcca 55%, #f6efe5 100%) !important;
}

/* Kontaktbereich */
.contact{
  background:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.88), transparent 30%),
    radial-gradient(circle at 90% 72%, rgba(169,120,53,.14), transparent 34%),
    linear-gradient(135deg, #eee3d4 0%, #f8f4ed 48%, #dfc9aa 100%) !important;
}

/* Karten und Formulare leicht plastischer */
.contact-card,
.model-card,
.pricing-note > div,
.workflow-card{
  box-shadow:
    0 24px 65px rgba(54,42,28,.11),
    inset 0 1px 0 rgba(255,255,255,.70);
}

/* Sehr feine Lichtkante */
.service-card,
.contact-card,
.model-card,
.pricing-note > div,
.workflow-card{
  border-color: rgba(169,120,53,.15) !important;
}

/* Mobile: Verläufe ruhiger halten */
@media (max-width: 820px){
  .hero,
  .services,
  .outcomes,
  .workflow,
  .models,
  .profile,
  .closing,
  .contact{
    background-size: auto !important;
    background-attachment: scroll !important;
  }
}

/* Sanftes Einrasten von Abschnitt zu Abschnitt */
html{
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

.hero,
.services,
.outcomes,
.workflow,
.models,
.profile,
.closing,
.contact{
  scroll-snap-align: start;
  scroll-margin-top: 88px;
}

/* =========================================================
   NTO – PREMIUM HERO MIT FINALem LOGO
   ========================================================= */

 /* =========================================================
   NTO – FINALER PREMIUM-HERO
   Logo harmonisch als Relief in den Hintergrund integriert
   ========================================================= */

.hero{
  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;
}

/* Alte Hero-Grafik deaktivieren */
.hero-art{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none;
  background:none !important;
  opacity:1 !important;
  filter:none !important;
}

.hero-art::before,
.hero-art::after{
  display:none !important;
}

/* Transparentes NTO-Logo als dezentes Wandrelief */
.hero::before{
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;

  width:clamp(560px, 46vw, 760px); 
  aspect-ratio:1.45 / 1;

  top:48px; 
  right:-1.5%; 

  background-image:url("https://nto-magdeburg.de/wp-content/uploads/2026/07/NTO_Logo_clean_transparent1.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;

  opacity:.34;

filter:
  saturate(.24)
  brightness(1.04)
  contrast(.84)
  blur(.25px)
  drop-shadow(0 14px 24px rgba(58,46,34,.08));

mix-blend-mode:luminosity;
}

/* Sehr dezentes Licht hinter dem Relief */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 84% 25%,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.12) 28%,
      transparent 54%
    ),
    linear-gradient(
      90deg,
      rgba(248,245,239,.98) 0%,
      rgba(248,245,239,.94) 38%,
      rgba(248,245,239,.54) 57%,
      rgba(248,245,239,.06) 78%,
      transparent 100%
    );
}

/* Texte und Karten bleiben klar im Vordergrund */
.hero-shell,
.hero-heading,
.timeline,
.hero-resolution{
  position:relative;
  z-index:2;
}

/* Tablet */
@media (max-width:1080px){
  .hero::before{
    width:600px;
    top:85px;
    right:-160px;
    opacity:.34;
  }
}

/* Smartphone */
@media (max-width:820px){
  .hero::before{
    width:520px;
    top:155px;
    right:-285px;
    opacity:.15;
  }

  .hero::after{
    background:
      linear-gradient(
        180deg,
        rgba(248,245,239,.96) 0%,
        rgba(248,245,239,.82) 64%,
        rgba(248,245,239,.58) 100%
      );
  }
}

  .hero::after{
    display:none;
  }

  .hero-heading{
    margin-left:0;
    padding:0;
    background:transparent;
    border-left:0;
} 
  
}

.hero-art{
  background-image:none !important;
}

/* =========================================================
   NTO-LOGO – harmonisch als Relief im Hero
   ========================================================= */

.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.hero-art{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none;

  /* Altes Hintergrundbild vollständig deaktivieren */
  background:none !important;
  opacity:1 !important;
  filter:none !important;
}

.hero-art img{
  position:absolute;
  display:block;

  width:clamp(470px, 39vw, 690px);
  height:auto;

  top:55px;
  right:-2%;

  opacity:.58;

  filter:
    saturate(.62)
    brightness(1.07)
    contrast(.91)
    drop-shadow(5px 9px 11px rgba(61,49,36,.15));

  mix-blend-mode:multiply;
}

/* Sanfter Übergang zwischen Logo und Hintergrund */
.hero-art::after{
  content:"";
  display:block !important;
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(250,247,241,1) 0%,
      rgba(250,247,241,.96) 40%,
      rgba(250,247,241,.42) 58%,
      rgba(250,247,241,0) 76%
    );
}

/* Inhalte bleiben sicher vor dem Logo */
.hero-shell,
.hero-heading,
.timeline,
.hero-resolution{
  position:relative;
  z-index:2;
}

/* Tablet */
@media (max-width:1080px){
  .hero-art img{
    width:620px;
    right:-170px;
    top:75px;
    opacity:.38;
  }
}

/* Smartphone */
@media (max-width:820px){
  .hero-art img{
    width:620px;
    right:-310px;
    top:150px;
    opacity:.16;
  }
}

.hero-art img{
  display:none !important;
}

/* =========================================================
   NTO – BOTANISCHER LICHTSCHATTEN & ELEGANTE MOMENTKARTEN
   ========================================================= */

/* Dezenter Pflanzenschatten im Hero */
.hero-art{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none;

  background:
    radial-gradient(
      ellipse 110px 34px at 4% 11%,
      rgba(77,69,56,.13) 0%,
      rgba(77,69,56,.07) 42%,
      transparent 72%
    ),
    radial-gradient(
      ellipse 92px 28px at 11% 18%,
      rgba(77,69,56,.11) 0%,
      rgba(77,69,56,.055) 44%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 125px 34px at 3% 27%,
      rgba(77,69,56,.10) 0%,
      rgba(77,69,56,.045) 45%,
      transparent 75%
    ),
    radial-gradient(
      ellipse 88px 25px at 16% 31%,
      rgba(77,69,56,.085) 0%,
      rgba(77,69,56,.035) 46%,
      transparent 76%
    ),
    radial-gradient(
      ellipse 135px 36px at 6% 42%,
      rgba(77,69,56,.075) 0%,
      rgba(77,69,56,.03) 48%,
      transparent 78%
    ) !important;

  opacity:.76 !important;
  filter:blur(7px) !important;
  transform:rotate(-7deg) scale(1.06);
  transform-origin:left top;
}

/* Karten weniger hart und stärker in die Fläche integriert */
.timeline .moment{
  position:relative;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 18% 5%,
      rgba(255,255,255,.94) 0%,
      rgba(255,255,255,.38) 38%,
      transparent 66%
    ),
    linear-gradient(
      145deg,
      rgba(255,253,249,.86) 0%,
      rgba(242,234,223,.72) 54%,
      rgba(229,216,198,.66) 100%
    ) !important;

  border:1px solid rgba(169,120,53,.13) !important;

  box-shadow:
    0 22px 48px rgba(55,43,29,.085),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(169,120,53,.05) !important;

  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Sehr dezenter Lichtschimmer in jeder Karte */
.timeline .moment::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.30) 0%,
      transparent 38%,
      rgba(169,120,53,.025) 100%
    );
}

/* Uhrzeit eleganter hervorheben */
.timeline .moment time{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:2px 10px;

  background:rgba(169,120,53,.075);
  border:1px solid rgba(169,120,53,.10);
  border-radius:999px;

  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

/* Kartentext sicher über der Lichtfläche */
.timeline .moment time,
.timeline .moment p{
  position:relative;
  z-index:1;
}

/* Feine Unterschiede zwischen den Karten */
.timeline .moment:nth-child(even){
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(255,255,255,.90) 0%,
      rgba(255,255,255,.28) 38%,
      transparent 66%
    ),
    linear-gradient(
      145deg,
      rgba(249,246,240,.84) 0%,
      rgba(235,225,211,.70) 58%,
      rgba(225,210,190,.62) 100%
    ) !important;
}

/* Smartphone: Schatten ruhiger */
@media (max-width:820px){
  .hero-art{
    opacity:.38 !important;
    filter:blur(9px) !important;
    transform:rotate(-5deg) scale(.92);
  }

  .timeline .moment{
    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
  }
}

/* =========================================================
   NTO – echter botanischer Lichtschatten im Hero
   ========================================================= */

.hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
}

/* Pflanzenschatten als eigene Ebene */
.hero-art{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none;

  background-image:
  url("https://nto-magdeburg.de/wp-content/uploads/2026/07/NTO_Pflanzenschatten_transparent.png") !important;  

  background-repeat:no-repeat !important;
  background-position:left -90px top 35px !important;
  background-size:720px auto !important;

  opacity:.72 !important; 

  filter:
  blur(1.5px)
  contrast(1.15)
  brightness(.82) !important; 

  transform:none !important;
}

/* Logo bleibt weiterhin sichtbar */
.hero::before{
  z-index:1 !important;
}

/* Texte und Karten bleiben im Vordergrund */
.hero-shell,
.hero-heading,
.timeline,
.hero-resolution{
  position:relative;
  z-index:3;
}

/* Schatten links sanft auslaufen lassen */
.hero-art::after{
  content:"";
  display:block !important;
  position:absolute;
  inset:0;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(248,245,239,.05) 0%,
      rgba(248,245,239,.16) 26%,
      rgba(248,245,239,.72) 50%,
      rgba(248,245,239,1) 68%
    );
}

/* Tablet */
@media (max-width:1080px){
  .hero-art{
    background-position:left -190px top 60px !important;
    background-size:650px auto !important;
    opacity:.32 !important;
  }
}

/* Smartphone */
@media (max-width:820px){
  .hero-art{
    background-position:left -290px top 100px !important;
    background-size:590px auto !important;
    opacity:.18 !important;
  }
}

.hero-art::after{
  display:none !important;
}

.brand-name{
    display:block;
    margin-top:2px;
    font-size:9px;
    letter-spacing:.17em;
    text-transform:uppercase;
    color:var(--muted);
    opacity:.9;
}

/* =========================================================
   NTO – HERO-ABSCHLUSS UND LEISTUNGSBEREICH
   Bereinigte, konfliktfreie Endfassung
   ========================================================= */

/* ---------- Editorialer Hero-Abschluss ---------- */
.hero-resolution{
    position:relative;
    z-index:3;
    max-width:1040px!important;
    margin:4rem auto 0!important;
    padding:3.5rem 0 5rem!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
}

.hero-resolution p{
    max-width:none;
}

.hero-resolution .button,
.hero-resolution .button-dark{
    display:none!important;
}

.resolution-kicker{
    max-width:none;
    margin:0 0 3.7rem!important;
    color:var(--gold)!important;
    font-family:var(--sans)!important;
    font-size:1.18rem!important;
    font-weight:700!important;
    line-height:1.4!important;
    letter-spacing:.22em!important;
    text-transform:uppercase;
}

.resolution-display{
    max-width:900px!important;
    margin:0;
    color:var(--ink);
    font-family:var(--serif)!important;
    font-size:clamp(3.5rem,5vw,5.3rem)!important;
    font-weight:400!important;
    line-height:.98!important;
    letter-spacing:-.038em!important;
}

.resolution-display span{
    display:block;
    margin-top:.08em;
    padding-left:4%!important;
}

.resolution-statement{
    max-width:640px!important;
    margin:3rem 0 0 6%!important;
    color:var(--charcoal);
    font-family:var(--serif)!important;
    font-size:clamp(1.45rem,1.75vw,1.8rem)!important;
    font-weight:400;
    line-height:1.38!important;
    letter-spacing:-.018em;
}

.resolution-editorial{
    display:grid;
    grid-template-columns:220px minmax(0,1fr)!important;
    gap:3.5rem!important;
    align-items:start;
    margin-top:5rem!important;
}

.resolution-prelist{
    max-width:220px!important;
    margin:0!important;
    padding-top:.65rem!important;
    color:var(--muted);
    font-family:var(--sans)!important;
    font-size:.88rem!important;
    font-weight:600;
    line-height:1.6!important;
    letter-spacing:.035em;
}

.resolution-words{
    display:flex;
    max-width:760px;
    flex-direction:column;
    align-items:flex-start;
}

.resolution-words span{
    position:relative;
    display:block;
    width:100%;
    padding:.9rem 0 1rem!important;
    border-bottom:0!important;
    color:var(--ink);
    font-family:var(--serif);
    font-size:clamp(1.9rem,2.55vw,2.95rem)!important;
    font-weight:400;
    line-height:1.08!important;
    letter-spacing:-.03em;
}

.resolution-words span::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:38%;
    height:1px;
    background:rgba(169,120,53,.11);
}

.resolution-words span:nth-child(2){padding-left:1.2%!important}
.resolution-words span:nth-child(3){padding-left:2.6%!important}
.resolution-words span:nth-child(4){padding-left:.8%!important}
.resolution-words span:nth-child(5){padding-left:1.8%!important}

.resolution-turn{
    display:grid;
    grid-template-columns:220px minmax(0,1fr)!important;
    gap:3.5rem!important;
    align-items:start;
    margin-top:5.2rem!important;
}

.resolution-small{
    margin:0!important;
    padding-top:.55rem!important;
    color:var(--muted);
    font-family:var(--sans)!important;
    font-size:.88rem!important;
    font-weight:600;
    line-height:1.6;
    letter-spacing:.035em;
}

.resolution-impact{
    max-width:660px!important;
    margin:0!important;
    color:var(--ink);
    font-family:var(--serif)!important;
    font-size:clamp(2.4rem,3.35vw,3.8rem)!important;
    font-weight:400;
    line-height:1.03!important;
    letter-spacing:-.04em;
}

.resolution-impact span{
    display:block;
    margin-top:.03em!important;
    color:var(--gold);
}

.resolution-focus{
    max-width:760px!important;
    margin:4.8rem auto 0!important;
    transform:translateX(-10px);
    color:var(--ink);
    font-family:var(--serif)!important;
    font-size:clamp(2rem,2.8vw,3rem)!important;
    font-weight:400;
    line-height:1.15!important;
    letter-spacing:-.035em;
    text-align:center;
}

.resolution-focus span{
    display:block;
    margin-top:.12em;
}

.resolution-signature{
    max-width:760px!important;
    margin:4.4rem auto 0!important;
    transform:translateX(28px);
    color:var(--gold);
    font-family:var(--serif)!important;
    font-size:clamp(3rem,4.3vw,4.7rem)!important;
    font-weight:400;
    line-height:1!important;
    letter-spacing:-.045em;
    text-align:left!important;
}

/* ---------- Überschrift Leistungsbereich ---------- */

.services .section-heading{
    max-width:980px;
    margin-bottom:4.5rem;
}

.services .section-heading .eyebrow{
    margin:0 0 2.4rem!important;
    color:var(--gold)!important;
    font-family:var(--sans)!important;
    font-size:1.22rem!important;
    font-weight:800!important;
    line-height:1.3!important;
    letter-spacing:.20em!important;
    text-transform:uppercase!important;
}

.services .section-heading h2{
    max-width:780px!important;
    margin:0!important;
    font-family:var(--serif)!important;
    font-size:clamp(3.4rem,4.2vw,4.8rem)!important;
    font-weight:400!important;
    line-height:1.02!important;
    letter-spacing:-.038em!important;
    text-wrap:balance;
}

.services .section-heading>p:last-child{
    max-width:780px!important;
    margin:2.4rem 0 0!important;
    color:var(--muted)!important;
    font-size:clamp(1.12rem,1.35vw,1.3rem)!important;
    line-height:1.65!important;
}

/* ---------- Tablet ---------- */

@media (max-width:1080px){

    .hero-resolution{
        max-width:920px;
        margin-top:3rem!important;
        padding:3rem 0 4rem!important;
    }

    .resolution-display{
        font-size:clamp(3.2rem,6vw,4.8rem)!important;
    }

    .resolution-editorial,
    .resolution-turn{
        grid-template-columns:180px 1fr!important;
        gap:2.8rem!important;
    }

    .resolution-focus{
        margin-top:4rem!important;
        transform:none;
    }

    .resolution-signature{
        margin-top:3.8rem!important;
        transform:none;
    }

    .services .section-heading h2{
        font-size:clamp(3rem,5vw,4rem)!important;
    }

    .services .section-heading .eyebrow{
        font-size:1.05rem!important;
    }

}

/* ---------- Smartphone ---------- */

@media (max-width:700px){

    .hero-resolution{
        margin-top:2rem!important;
        padding:2.5rem 0 3.5rem!important;
    }

    .resolution-kicker{
        margin-bottom:2rem!important;
        font-size:.82rem!important;
        letter-spacing:.18em!important;
    }

    .resolution-display{
        font-size:clamp(2.8rem,11vw,4rem)!important;
        line-height:1!important;
    }

    .resolution-display span{
        padding-left:0!important;
    }

    .resolution-statement{
        margin:2.2rem 0 0!important;
        font-size:clamp(1.3rem,6vw,1.7rem)!important;
    }

    .resolution-editorial,
    .resolution-turn{
        display:block!important;
        margin-top:4rem!important;
    }

    .resolution-prelist,
    .resolution-small{
        max-width:100%!important;
        margin:0 0 2rem!important;
    }

    .resolution-words span,
    .resolution-words span:nth-child(2),
    .resolution-words span:nth-child(3),
    .resolution-words span:nth-child(4),
    .resolution-words span:nth-child(5){
        padding-left:0!important;
    }

    .resolution-words span::after{
        width:100%;
    }

    .resolution-impact{
        font-size:clamp(2rem,9vw,3rem)!important;
    }

    .resolution-focus{
        margin-top:4rem!important;
        font-size:clamp(1.9rem,8vw,2.8rem)!important;
        text-align:left!important;
    }

    .resolution-signature{
        margin-top:3.5rem!important;
        font-size:clamp(2.6rem,12vw,4rem)!important;
        text-align:left!important;
    }

    .services .section-heading{
        margin-bottom:3rem!important;
    }

    .services .section-heading .eyebrow{
        font-size:.95rem!important;
        margin-bottom:1.5rem!important;
        letter-spacing:.18em!important;
    }

    .services .section-heading h2{
        max-width:100%!important;
        font-size:clamp(2.5rem,10vw,3.2rem)!important;
    }

    .services .section-heading>p:last-child{
        font-size:1.05rem!important;
        margin-top:1.8rem!important;
    }

}