:root{--green:#5c4a32;--paper:#f5e6d3;--ink:#5c4a32;--line:#d4b896;--sage:#b2ac88;--gold:#c9a96e;--sand:#d4b896}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit}.draft{background:var(--sage);text-align:center;padding:9px 16px;font-size:11px;letter-spacing:1.2px}header{display:flex;justify-content:space-between;align-items:center;padding:22px 6%;background:var(--paper);border-bottom:1px solid var(--line)}.brand{text-decoration:none;font-size:22px;font-weight:800;letter-spacing:-.6px}.brand span{display:block;font-size:13px;font-weight:400;letter-spacing:0;margin-top:5px}nav{display:flex;gap:30px}nav a{text-decoration:none;font-size:14px}nav a:hover{text-decoration:underline}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:710px;max-width:1600px;margin:auto}.hero-copy{padding:75px 10% 55px 12%}.eyebrow,.section-label{font-size:11px;letter-spacing:2px;font-weight:700}.hero h1{font-size:clamp(64px,7.2vw,112px);line-height:.94;letter-spacing:-5px;margin:32px 0;color:var(--green)}h1 span{display:block;font-size:24px;line-height:1.3;letter-spacing:-.5px;margin-top:24px;font-weight:400}.slogan{font-size:25px;line-height:1.3;margin:34px 0}.slogan em{font-style:normal;color:var(--green)}.button{background:var(--green);color:white;display:inline-flex;padding:17px 21px;text-decoration:none;font-size:13px;gap:40px}.portrait{position:relative;overflow:hidden;background:var(--sand)}.portrait img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:50% 20%}.photo-note{position:absolute;bottom:20px;right:20px;background:#ffffffd9;padding:8px 12px;font-size:11px}.ribbon{background:var(--green);color:white;padding:27px 6%;display:flex;justify-content:space-between;gap:20px;font-size:18px}.editorial{display:grid;grid-template-columns:1fr 2fr;gap:50px;padding:110px 9%;max-width:1350px;margin:auto}h2{font-size:clamp(35px,4.2vw,58px);line-height:1.05;font-weight:500;letter-spacing:-2px;margin:0 0 35px}p{font-size:17px;line-height:1.7} .editorial p:first-of-type{font-size:22px;line-height:1.5}.section-label{padding-top:9px}.about{background:var(--sage);padding:95px 9%;display:grid;grid-template-columns:1fr 1fr;gap:9%}.about h2{margin-top:30px;font-size:44px}dl{margin:40px 0 0}dl div{border-top:1px solid var(--green);padding:15px 0}dt{font-size:11px;text-transform:uppercase;letter-spacing:1px}dd{margin:7px 0 0;font-size:18px}.about-text p:first-child{margin-top:0}.future{padding:105px 9%;max-width:1500px;margin:auto}.future h2{margin-top:30px}.future-body{max-width:780px}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:35px;margin-top:65px}.principles>div{border-top:2px solid var(--green);padding-top:20px}.principles span{font-size:12px;color:var(--green)}.principles h3{font-size:23px;font-weight:500;letter-spacing:-.6px}.principles p{font-size:15px}.closing{background:var(--green);color:var(--paper);padding:90px 9%}.closing h2{font-size:clamp(48px,7vw,90px);margin-top:35px}.closing a{display:inline-block;margin-top:25px;font-size:13px}footer{padding:35px 6%;display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px}footer p{width:100%;font-size:12px;color:var(--green);margin:0}a:focus-visible{outline:3px solid var(--gold);outline-offset:5px}@media(max-width:700px){header{padding:20px 6%;align-items:flex-start}nav{gap:12px;flex-wrap:wrap;justify-content:flex-end;max-width:170px}nav a{font-size:12px}.brand{font-size:18px}.draft{font-size:9px}.hero{display:flex;flex-direction:column}.hero-copy{padding:44px 7% 40px}.hero h1{font-size:76px;letter-spacing:-4px}.hero h1 span{font-size:22px}.slogan{font-size:23px}.portrait{height:480px}.portrait img{object-position:50% 17%}.ribbon{flex-direction:column;gap:8px;font-size:16px;padding:24px 7%}.editorial{display:block;padding:65px 7%}.section-label{margin-bottom:26px}.editorial p:first-of-type{font-size:20px}.about{display:block;padding:65px 7%}.about-text{margin-top:45px}.about h2{font-size:38px}.future{padding:65px 7%}.principles{grid-template-columns:1fr;gap:22px;margin-top:45px}.closing{padding:65px 7%}p{font-size:16px}footer{padding:30px 7%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Palette fournie : Sage & Warm Neutrals */
.button{background:var(--gold);color:var(--ink);font-weight:700}.button:hover{background:var(--sand)}.ribbon{background:var(--sage);color:var(--ink)}.principles>div{border-top-color:var(--gold)}.closing .eyebrow{color:var(--gold)}.photo-note{background:var(--paper);color:var(--ink)}

.portrait{background:var(--sage)}.portrait img{object-fit:contain;object-position:center bottom}

/* Einstieg mit Güttingen-Motiv und freigestelltem Porträt */
.hero{position:relative;isolation:isolate;max-width:none;min-height:760px;background:url('assets/guettingen.jpg') center 42%/cover no-repeat;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(245,230,211,.96),rgba(245,230,211,.82) 36%,rgba(245,230,211,.12) 73%)}
.hero-copy{padding-left:12%;position:relative;z-index:2}.portrait{background:transparent;overflow:visible}.portrait img{height:96%;width:100%;bottom:0;object-fit:contain;object-position:center bottom}.photo-note{display:none}
@media(max-width:700px){.hero{min-height:0;background-position:40% center}.hero:before{background:linear-gradient(180deg,rgba(245,230,211,.94),rgba(245,230,211,.72) 42%,rgba(245,230,211,.08) 70%)}.hero-copy{padding:35px 7% 15px}.hero h1{font-size:64px;margin:22px 0}.hero h1 span{font-size:20px;margin-top:16px}.slogan{font-size:20px;margin:20px 0}.hero .button{display:none}.portrait{height:510px;margin-top:-12px}.portrait img{height:100%;width:100%;object-fit:contain;object-position:center bottom}}
/* Porträt bis zu den verschränkten Armen; Unterkörper ausserhalb des Ausschnitts */
.hero .portrait{overflow:hidden;align-self:stretch;position:relative}
.hero .portrait img{height:auto;width:100%;max-width:650px;top:30px;bottom:auto;left:50%;transform:translateX(-50%);object-fit:initial;object-position:initial}
@media(min-width:701px){.hero{min-height:660px;height:660px}.hero-copy{padding-top:45px;padding-bottom:30px}.hero .portrait img{width:auto;height:1080px;max-width:none;top:24px}.hero .slogan{margin:24px 0}}
@media(max-width:700px){.hero .portrait{height:380px;flex:none}.hero .portrait img{height:630px;width:auto;max-width:none;top:0}.hero{height:auto}}

.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.button{border:0;font-family:inherit;cursor:pointer;align-items:center}.hero-actions .button{gap:16px;padding:16px;font-size:12px}dialog{border:0;background:var(--paper);color:var(--ink);width:min(600px,calc(100% - 30px));max-height:90vh;padding:38px;border-radius:16px;box-shadow:0 20px 90px #0004}dialog::backdrop{background:#30271dcc;backdrop-filter:blur(5px)}dialog h2{font-size:34px;margin:18px 0 12px;letter-spacing:-1px}dialog p{font-size:15px;line-height:1.5}.dialog-close{position:absolute;top:12px;right:16px;border:0;background:transparent;font-size:30px;color:var(--ink);cursor:pointer}.question-icon{width:62px;height:62px;background:var(--sage);border-radius:50%;padding:14px;margin-bottom:22px}.question-icon svg{width:100%;height:100%}.name-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}form label{display:block;font-size:13px;font-weight:700;margin:18px 0}form input:not([type=checkbox]),form textarea{display:block;width:100%;margin-top:8px;border:1px solid var(--sand);border-radius:6px;background:#fff9f1;color:var(--ink);font:inherit;font-weight:400;padding:12px}form textarea{resize:vertical}form input:focus,form textarea:focus{outline:2px solid var(--ink);outline-offset:2px}.consent{display:flex;gap:12px;align-items:flex-start;font-weight:400;line-height:1.5}.consent input{margin-top:3px;min-width:18px;height:18px;accent-color:var(--green)}.form-note,.form-status{font-size:12px!important}.button:disabled{opacity:.55;cursor:not-allowed}@media(max-width:700px){.hero .hero-actions .button{display:inline-flex}.hero-actions{margin-bottom:15px}dialog{padding:30px 22px}.name-fields{grid-template-columns:1fr;gap:0}}

/* Textfassung v3: vollständiger Wortlaut */
.hero h1{max-width:560px;font-size:clamp(58px,6.8vw,105px)}.hero .slogan{max-width:430px;font-size:25px;line-height:1.35}.vote-statement{font-size:clamp(24px,3vw,38px);line-height:1.4;max-width:1000px}.future-body p{margin:0 0 24px}@media(max-width:700px){.hero h1{font-size:60px}.hero .slogan{font-size:22px}}

/* Gleich grosse mobile Startseiten-Buttons, ohne Symbole */
@media(max-width:700px){.hero-actions{display:grid;grid-template-columns:1fr;grid-auto-rows:52px;width:100%;max-width:360px;gap:12px}.hero .hero-actions .button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:52px;min-width:0;margin:0;padding:12px 16px;font-size:13px;line-height:1.25;text-align:center}}

/* Separate Farbvariante: dunkles Blau mit warmen Erdtönen */
:root{--green:#3d6580;--paper:#edf0ee;--ink:#345d78;--line:#b8c6c8;--sage:#aabdc2;--gold:#c1aa85;--sand:#d9cdbc}
body{background:#edf0ee;color:#345d78}
.draft{background:#42677f;color:#f4efe7}
header{background:#345d78;color:#f4efe7;border-color:#42677f}
.hero:before{background:linear-gradient(90deg,rgba(52,93,120,.97),rgba(52,93,120,.87) 38%,rgba(52,93,120,.28) 75%)}
.hero h1,.hero .slogan,.hero .slogan em,.hero .eyebrow{color:#f4efe7}
.hero h1 span{color:#e0d1b8}
.hero .button{background:#c1aa85;color:#345d78}
.hero .button:hover{background:#dccbb0}
.about{background:#426f88;color:#f4efe7}
.about .section-label{color:#d8c5a6}
.about dl div{border-color:#7d98a6}
.editorial{background:#edf0ee}
.editorial .section-label,.future .section-label{color:#496b7c}
.future{color:#345d78}
.closing{background:#345d78;color:#f4efe7}
footer{background:#dbe3e3;color:#345d78}
footer p{color:#42677f}
dialog{background:#edf0ee;color:#345d78}
.question-icon{background:#c2d0d2;color:#345d78}
form input:not([type=checkbox]),form textarea{background:#f9f8f4;border-color:#aabdc2;color:#345d78}
.button{background:#c1aa85;color:#345d78}
@media(max-width:700px){.hero:before{background:linear-gradient(180deg,rgba(52,93,120,.97),rgba(52,93,120,.88) 42%,rgba(52,93,120,.22) 75%)}}

/* Neues Originalfoto mit eigenem Güttingen-Hintergrund */
.hero .portrait{overflow:hidden}.hero .portrait img{width:100%;height:100%;max-width:none;top:0;bottom:0;left:0;transform:none;object-fit:cover;object-position:center 30%}@media(max-width:700px){.hero .portrait{height:510px}.hero .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 25%}}

/* Freigestelltes Porträt vor dem gelieferten Hafenfoto */
.hero{background-image:url('assets/guettingen-hafen-bereinigt.png');background-position:center 48%}
.hero:before{background:linear-gradient(90deg,rgba(52,93,120,.96),rgba(52,93,120,.83) 36%,rgba(52,93,120,.32) 64%,rgba(52,93,120,.08))}
.hero .portrait{background:transparent}
.hero .portrait img{width:100%;height:100%;left:0;top:0;bottom:0;transform:none;object-fit:contain;object-position:center bottom}
@media(max-width:700px){.hero{background-position:48% center}.hero:before{background:linear-gradient(180deg,rgba(52,93,120,.97),rgba(52,93,120,.85) 40%,rgba(52,93,120,.14) 75%)}.hero .portrait{height:510px}.hero .portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom}}

/* Weiterer Porträtausschnitt: vorhandenes Foto vollständig, mehr seitlicher Abstand */
.hero .portrait{overflow:visible}
.hero .portrait img{width:92%;height:92%;left:4%;top:auto;bottom:0;transform:none;object-fit:contain;object-position:center bottom}
@media(max-width:700px){.hero .portrait{height:540px}.hero .portrait img{width:94%;height:100%;left:3%;top:auto;bottom:0;object-fit:contain;object-position:center bottom}}

/* Ergänzte Ärmel laufen natürlich bis über den unteren Bildrand */
.hero .portrait img{width:auto;height:98%;max-width:none;left:50%;top:auto;bottom:-100px;transform:translateX(-50%);object-fit:contain;object-position:center bottom}
@media(max-width:700px){.hero .portrait img{width:auto;height:100%;left:50%;bottom:-70px;transform:translateX(-50%)}}

/* Deutlichere Handlungsbuttons */
.hero-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:520px;align-items:stretch}
.hero .hero-actions .button{display:flex;align-items:center;justify-content:center;min-width:0;min-height:58px;height:auto;padding:18px 20px;font-size:15px;font-weight:700;line-height:1.3;text-align:center;background:#d0b68c;color:#132c3e;border:1px solid #e1cba6;border-radius:3px;box-shadow:0 4px 14px rgba(4,22,35,.18);transition:background .18s ease,box-shadow .18s ease}
.hero .hero-actions .button:hover{background:#e0c8a2;box-shadow:0 6px 18px rgba(4,22,35,.25)}
@media(max-width:700px){.hero-actions{grid-template-columns:1fr;grid-auto-rows:58px;max-width:360px}.hero .hero-actions .button{height:58px;min-height:58px;width:100%;padding:16px 22px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.hero .hero-actions .button{transition:none}}

/* Gemeinsame linke Flucht für alle drei Abschnittsmarkierungen */
.about,.editorial,.future{width:100%;max-width:none;margin-left:0;margin-right:0;padding-left:9%;padding-right:9%}
@media(max-width:700px){.about,.editorial,.future{padding-left:7%;padding-right:7%}}

/* Kompakter Steckbrief im bestehenden blauen Look */
.profile{max-width:380px;margin-top:38px;border-top:2px solid #c1aa85;padding-top:24px}
.profile h3{font-size:25px;font-weight:600;letter-spacing:-.5px;margin:0 0 8px;color:#f4efe7}
.profile dl{margin:22px 0 0}
.profile dl>div{display:grid;grid-template-columns:105px minmax(0,1fr);gap:15px;align-items:baseline;padding:16px 0;border-top:1px solid #78909d}
.profile dt{font-size:11px;letter-spacing:1.2px;color:#e0d1b8;font-weight:700}
.profile dd{margin:0;font-size:17px;line-height:1.45;color:#f4efe7}
.profile dd span{display:block;font-size:14px;margin-top:5px;color:#d5e0e4}
@media(max-width:700px){.profile{max-width:none;margin-top:28px}.profile dl>div{grid-template-columns:100px minmax(0,1fr)}}

/* Mobile Reihenfolge: Vorstellung, Porträt, Handlungsbuttons */
@media(max-width:700px){
 .hero{display:flex;flex-direction:column}
 .hero .hero-copy{display:contents}
 .hero .hero-copy>.eyebrow{order:1;margin:35px 7% 0}
 .hero h1{order:2;margin:22px 7% 0}
 .hero .slogan{order:3;margin:20px 7% 16px}
 .hero .portrait{order:4;width:100%;height:460px;margin:0;overflow:hidden}
 .hero .portrait img{height:100%;width:auto;left:50%;top:auto;bottom:-35px;transform:translateX(-50%)}
 .hero .hero-actions{order:5;grid-template-columns:1fr;grid-auto-rows:58px;width:auto;max-width:none;align-self:stretch;margin:22px 7% 34px}
}

/* Mobil: eigener blauer Bereich direkt unter der Fotofläche */
@media(max-width:700px){
 .hero .hero-actions{width:100%;max-width:none;margin:0;padding:26px 7% 32px;background:#426f88;grid-template-columns:1fr;grid-auto-rows:58px;gap:14px;position:relative;z-index:3}
 .hero .portrait{margin-bottom:0;overflow:hidden}
}