/* =========================================================
   VORSCHAU Formen je Abschnitt (06.10.2026)
   Innerhalb eines Abschnitts eine Form, von Abschnitt zu Abschnitt wechselt sie.
   So wirkt nichts halb-halb, aber auch nicht alles gleich.
   Buttons bleiben überall rund (Bedienelemente = eine Sprache).
   ========================================================= */

/* Hero: bleibt weich gerundet (28) */

/* Leistungen: groß gerundet (28), siehe leistungen-neu.css */

/* Webdesign: kleiner Radius wie ein echtes Browserfenster */
#web .nx-browser-bar { border-radius: 10px 10px 0 0; }
#web .nx-browser-view { border-radius: 0 0 10px 10px; }
#web .nx-browser-frame { border-radius: 16px; }

/* Kundenbeispiel: eckig, wie Abzüge nebeneinander */
#beispiel .nx-chain-img { border-radius: 0; }

/* 3D-Entwurf: extra rund, die Fläche wirkt wie ein Studio-Hintergrund */
#hx3d .hx3d-card { border-radius: 56px; }
@media (max-width: 760px) { #hx3d .hx3d-card { border-radius: 36px; } }

/* Arbeiten: mittlerer Radius (12) */
#portfolio .pf-card { border-radius: 12px; }

/* Über mich: eckig, Porträt und blaue Fläche dahinter genauso wie die Stationen */
#ueber-mich .nx-portrait img,
#ueber-mich .nx-portrait::before,
#ueber-mich .nx-name,
#ueber-mich .nx-station { border-radius: 0; }

/* FAQ: eckig, schlichte Liste */
#faq .faq-item { border-radius: 0; margin-bottom: -1px; }



/* Etiketten: Folien-Aufkleber (schwarz, Großbuchstaben, leicht schräg aufgeklebt).
   Sparsam: nur Leistungen, Kundenbeispiel und Kontakt. Webdesign ohne Etikett. */
.nx-pill { display: inline-block; padding: 7px 12px 6px; border-radius: 0; background: var(--ink) !important; color: #fff;
  font-size: .8rem; font-weight: 700; line-height: 1; letter-spacing: .05em; text-transform: uppercase;
  rotate: -3deg; transform-origin: left center; box-shadow: 0 6px 12px -8px rgba(10, 10, 11, .6); }
.nx-pill i { display: none; }
.nx-contact .nx-pill { background: #fff !important; color: var(--ink); rotate: 2deg; }
#beispiel .nx-pill { rotate: 2deg; }
.nx-web .nx-pill { display: none; }

/* Namens-Etikett am Porträt: eckig, ohne grünen Statuspunkt */
.nx-name i { display: none; }
.nx-name { padding: 10px 16px; }


/* Buttons je Bereich (Ivens Mischung):
   Menüleiste eckig · Hero rund · Webdesign rund · Arbeiten rund (inkl. Filter) · Kontakt komplett eckig */
.navcta, .navcta.navcta-mobile { border-radius: 0 !important; }
#kontakt .hx-btn, #kontakt .hx-btn .hx-arrow, #kontakt .segment span { border-radius: 0 !important; }
/* Kontakt-Fläche und Formular eckig */
#kontakt .nx-contact, #kontakt .contact-form { border-radius: 0; }

/* 3D-Etikett „3D-Entwurf“ als Aufkleber wie die anderen Etiketten */
.hx3d-chip { padding: 7px 12px 6px; border-radius: 0; background: var(--ink); color: #fff; font-size: .8rem; font-weight: 700;
  line-height: 1; letter-spacing: .05em; text-transform: uppercase; rotate: -2deg; box-shadow: 0 6px 12px -8px rgba(10, 10, 11, .6); }

/* Logo-Animation: Das Programmfenster ragt rechts 86 px über das Logo (Bibliothek-Leiste).
   Logo wird bei schmaleren Spalten etwas kleiner, damit das Fenster nie über den Schieber läuft. */
@media (min-width: 901px) { .hx-logo { width: min(calc(100% - 90px), 390px); } }

/* Kontakt: direkte Wege (WhatsApp + Anrufen) als eckige Buttons, passend zur eckigen Kontakt-Fläche */
.kx-direkt { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.kx-direkt a { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; font-weight: 700; font-size: .95rem;
  border: 2px solid var(--ink); transition: background-color .15s ease, color .15s ease, scale .12s ease-out; }
.kx-direkt svg { width: 20px; height: 20px; flex: none; }
.kx-wa { background: var(--ink); color: #fff; }
.kx-tel { background: #fff; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) {
  .kx-wa:hover { background: #fff; color: var(--ink); }
  .kx-tel:hover { background: var(--ink); color: #fff; }
}
.kx-direkt a:active { scale: .97; }
.kx-direkt a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 640px) { .kx-direkt a { flex: 1 1 100%; justify-content: center; } }