/* Hauenstein IT – Layout, Komponenten und responsive Darstellung */

:root {
  --ink:#122b3d;
  --muted:#566773;
  --accent:#b4ed89;
  --line:#dce3e7;
  --paper:#f4f7f9;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}

body {
  margin:0;
  color:var(--ink);
  font:1rem/1.65 Arial,Helvetica,sans-serif;
}

a {
  color:inherit;
}

button,input,select,textarea {
  font:inherit;
}

a,button,summary {
  -webkit-tap-highlight-color:transparent;
}

:focus-visible {
  outline:3px solid #4d8fbb;
  outline-offset:5px;
}

.wrap {
  width:min(1200px,calc(100% - 96px));
  margin:auto;
}

.skip {
  position:fixed;
  top:-100px;
  background:var(--ink);
  color:white;
  padding:12px;
  z-index:100;
}

.skip:focus {
  top:0;
}

header {
  position:sticky;
  top:0;
  z-index:10;
  background:#fff;
  border-bottom:1px solid var(--line);
}

.nav {
  min-height:92px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.025em;
  font-size:1rem;
}

.mark {
  width:39px;
  height:39px;
  background:var(--ink);
  color:#fff;
  display:grid;
  place-content:center;
  border-radius:7px;
  font-size:1.3rem;
  letter-spacing:-3px;
  padding-right:4px;
}

.mark span {
  color:var(--accent);
}

.brand-it {
  color:#597881;
}

nav {
  display:flex;
  gap:32px;
  align-items:center;
}

nav a {
  text-decoration:none;
  font-size:.875rem;
  font-weight:600;
}

nav a:hover {
  color:#386438;
}

.nav-cta {
  border:1px solid var(--ink);
  padding:9px 20px;
  border-radius:4px;
}

.hero {
  background:var(--paper);
  padding:88px 0 76px;
}

.hero-grid {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:78px;
  align-items:center;
}

.eyebrow {
  font-size:.75rem;
  letter-spacing:.12em;
  font-weight:700;
  margin:0 0 22px;
}

.hero .eyebrow {
  color:#426873;
}

h1 {
  font-size:clamp(2.5rem,4.7vw,4.4rem);
  line-height:1.09;
  letter-spacing:-.055em;
  margin:0 0 26px;
  font-weight:750;
}

h1 em {
  font-style:normal;
  color:#426873;
}

h2 {
  font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1.17;
  letter-spacing:-.04em;
  margin:0 0 24px;
}

h3 {
  font-size:1.2rem;
  line-height:1.4;
  margin:0 0 12px;
  letter-spacing:-.02em;
}

p {
  margin:0 0 18px;
}

.lead {
  font-size:1.125rem;
  color:var(--muted);
  max-width:570px;
}

.actions {
  display:flex;
  gap:25px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:32px;
}

.button {
  display:inline-block;
  border:0;
  border-radius:4px;
  background:var(--ink);
  color:#fff;
  text-decoration:none;
  padding:15px 23px;
  font-weight:700;
  font-size:.875rem;
  cursor:pointer;
}

.button:hover {
  background:#294b60;
}

.text-link {
  font-size:.875rem;
  text-underline-offset:6px;
  font-weight:600;
}

.hero-note {
  font-size:.875rem;
  color:var(--muted);
  margin-top:22px;
  margin-bottom:0;
}

.hero-panel {
  background:var(--ink);
  color:#fff;
  border-radius:8px;
  padding:32px 34px;
  box-shadow:0 20px 40px #122b3d12;
}

.panel-top {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font:700 .75rem/1.4 monospace;
  letter-spacing:.035em;
  color:#bdd0dc;
  border-bottom:1px solid #ffffff26;
  padding-bottom:25px;
}

.panel-index {
  color:var(--accent);
  white-space:nowrap;
}

.hero-panel h2 {
  font-size:2rem;
  margin:26px 0;
}

.capability {
  display:flex;
  align-items:center;
  gap:20px;
  border-top:1px solid #ffffff26;
  padding:17px 0;
}

.cap-no {
  color:var(--accent);
  font:1rem monospace;
}

.capability strong {
  font-size:1.125rem;
}

.capability p {
  font-size:.875rem;
  color:#bdd0dc;
  margin:3px 0 0;
}

.panel-footer {
  margin-top:16px;
  font:700 .75rem/1.5 monospace;
  color:var(--accent);
}

.topic-band {
  background:var(--accent);
}

.topic-band .wrap {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  font:700 .75rem/1.5 monospace;
  letter-spacing:.06em;
}

.section {
  padding-top:90px;
  padding-bottom:90px;
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:55px;
  margin-bottom:42px;
}

.section-heading h2 {
  margin:0;
}

.section-heading>p {
  max-width:370px;
  color:var(--muted);
  margin:0;
}

.services {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
}

.services article {
  border:1px solid var(--line);
  border-radius:5px;
  padding:30px 26px;
  display:flex;
  flex-direction:column;
}

.service-no {
  font:1rem monospace;
  color:#547781;
  margin-bottom:27px;
}

.services p,.steps p {
  color:var(--muted);
}

ul {
  padding-left:18px;
  margin:4px 0 30px;
  font-size:.875rem;
}

li {
  padding:3px 0;
}

li::marker {
  color:#57813d;
}

.services a {
  margin-top:auto;
  font-size:.875rem;
  font-weight:700;
  text-underline-offset:6px;
}

.expertise {
  background:var(--ink);
  color:#fff;
  padding:76px 0;
}

.expertise-grid {
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:100px;
}

.expertise .eyebrow {
  color:var(--accent);
}

.expertise p {
  color:#c2d1db;
  max-width:440px;
}

.outline {
  color:var(--accent);
  border:1px solid #809697;
  margin-top:15px;
}

.expertise-list>div {
  display:flex;
  gap:25px;
  padding:22px 0;
  border-bottom:1px solid #ffffff29;
}

.expertise-list>div:first-child {
  padding-top:0;
}

.expertise-list>div>span {
  color:var(--accent);
  font: .875rem monospace;
  padding-top:5px;
}

.expertise-list h3 {
  margin-bottom:6px;
}

.expertise-list p {
  font-size:.9375rem;
  margin:0;
  max-width:none;
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  margin-top:40px;
}

.steps article {
  border-top:1px solid var(--line);
  padding-top:22px;
}

.steps span {
  font:1rem monospace;
  display:block;
  color:#587882;
  margin-bottom:22px;
}

.steps h3 {
  font-size:1.125rem;
}

.steps p {
  margin:0;
}

.faq {
  padding-bottom:90px;
  display:grid;
  grid-template-columns:1fr 1.7fr;
  gap:70px;
}

details {
  border-bottom:1px solid var(--line);
  padding:20px 0;
}

details:first-child {
  border-top:1px solid var(--line);
}

summary {
  cursor:pointer;
  font-weight:600;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:25px;
}

summary::-webkit-details-marker {
  display:none;
}

summary::after {
  content:'+';
  color:#547781;
  font-size:1.35rem;
  line-height:1.1;
}

details[open] summary::after {
  content:'−';
}

details p {
  color:var(--muted);
  margin:16px 24px 0 0;
}

.contact {
  background:var(--paper);
  padding:80px 0;
}

.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
}

.contact-grid>div>p {
  max-width:360px;
  color:var(--muted);
}

.contact-note {
  border-left:3px solid #79a653;
  padding-left:20px;
  margin-top:40px;
}

.contact-note strong {
  font-size:1.125rem;
  line-height:1.5;
}

.contact-note p {
  font-size:.875rem;
  color:var(--muted);
  margin:10px 0 0;
  max-width:310px;
}

label {
  display:block;
  font-size:.875rem;
  font-weight:600;
  margin:0 0 8px;
}

select,textarea {
  width:100%;
  border:1px solid #b8c7d0;
  border-radius:4px;
  background:white;
  color:var(--ink);
  padding:12px 14px;
  margin-bottom:20px;
  font-size:1rem;
}

textarea {
  resize:vertical;
}

textarea::placeholder {
  color:#687883;
}

.form-note {
  font-size:.875rem;
  color:var(--muted);
}

#result {
  margin-top:25px;
}

.copy {
  background:#fff;
  border:1px solid var(--ink);
  border-radius:4px;
  padding:10px 16px;
  cursor:pointer;
}

#copy-status {
  font-size:.875rem;
  margin-top:10px;
}

footer {
  display:flex;
  gap:24px;
  justify-content:space-between;
  align-items:center;
  padding-top:34px;
  padding-bottom:34px;
}

footer p,footer>span {
  font-size:.75rem;
  color:var(--muted);
  margin:0;
}

footer .brand {
  font-size:.875rem;
}

@media(min-width:1500px) {
  .hero {
    padding-top:110px;
    padding-bottom:100px;
  }
}

@media(max-width:1000px) {
  .wrap {
    width:calc(100% - 56px);
  }
  .hero-grid {
    gap:32px;
  }
  .hero {
    padding:60px 0;
  }
  .hero-panel {
    padding:25px;
  }
  nav {
    gap:20px;
  }
  .expertise-grid,.contact-grid {
    gap:50px;
  }
  .services {
    gap:15px;
  }
  .services article {
    padding:24px 20px;
  }
  .steps {
    gap:25px;
  }
  .section-heading {
    gap:30px;
  }
  .section-heading>p {
    max-width:310px;
  }
  .faq {
    gap:35px;
  }
  footer {
    flex-wrap:wrap;
  }
}

@media(max-width:720px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .nav {
    min-height:78px;
    flex-wrap:wrap;
    justify-content:center;
    padding:16px 0;
    gap:14px;
  }
  .brand {
    font-size:.875rem;
  }
  nav {
    width:100%;
    justify-content:space-between;
    gap:10px;
  }
  nav a {
    font-size:.875rem;
  }
  .nav-cta {
    padding:6px 12px;
  }
  .hero {
    padding:45px 0;
  }
  .hero-grid,.expertise-grid,.contact-grid,.faq {
    grid-template-columns:1fr;
    gap:38px;
  }
  h1 {
    font-size:clamp(2.5rem,8.5vw,3.8rem);
  }
  .eyebrow {
    font-size:.75rem;
    letter-spacing:.065em;
  }
  .hero-panel {
    padding:27px;
  }
  .hero-panel h2 {
    font-size:1.8rem;
  }
  .topic-band .wrap {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    font-size:.75rem;
    padding:18px 0;
  }
  .section {
    padding-top:60px;
    padding-bottom:60px;
  }
  .section-heading {
    display:block;
  }
  .section-heading>p {
    max-width:none;
    margin-top:22px;
  }
  .services,.steps {
    grid-template-columns:1fr;
    gap:20px;
  }
  .services article {
    padding:27px;
  }
  .services p {
    max-width:500px;
  }
  .services .service-no {
    margin-bottom:18px;
  }
  .expertise {
    padding:55px 0;
  }
  .expertise-list {
    margin-top:5px;
  }
  .steps {
    margin-top:30px;
    gap:28px;
  }
  .steps span {
    margin-bottom:14px;
  }
  .faq {
    padding-bottom:60px;
    gap:10px;
  }
  .contact {
    padding:55px 0;
  }
  .contact-note {
    margin-top:25px;
  }
  .contact-grid {
    gap:35px;
  }
  footer {
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
  }
  html {
    scroll-padding-top:150px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
}

.contact-email {
  display:inline-block;
  margin-top:15px;
  font-weight:700;
  text-underline-offset:5px;
  overflow-wrap:anywhere;
}

.draft-actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}

.hardware-section {
  border-bottom:1px solid var(--line);
}

.hardware-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
}

.hardware-grid article {
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:6px;
  padding:30px;
  display:flex;
  flex-direction:column;
}

.hardware-category {
  font:700 .75rem/1.5 monospace;
  letter-spacing:.08em;
  color:#426873;
  margin-bottom:14px;
}

.hardware-grid h3 {
  font-size:1.5rem;
}

.hardware-grid article>p:not(.hardware-category) {
  color:var(--muted);
}

.hardware-grid a {
  margin-top:auto;
  font-size:.875rem;
  font-weight:700;
  text-underline-offset:6px;
}

@media(max-width:720px) {
  .hardware-grid {
    grid-template-columns:1fr;
    gap:20px;
  }
  .hardware-grid article {
    padding:27px;
  }
}

.azure-card {
  grid-column:1/-1;
}

.certificate-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.certificate-grid article {
  border:1px solid var(--line);
  border-top:3px solid #79a653;
  border-radius:5px;
  padding:26px;
}

.certificate-grid h3 {
  font-size:1.15rem;
}

.certificate-grid article>p:not(.hardware-category) {
  color:var(--muted);
  font-size:.875rem;
}

.certificate-note {
  margin-bottom:0;
}

.certificates {
  border-bottom:1px solid var(--line);
}

@media(max-width:900px) {
  .certificate-grid {
    grid-template-columns:1fr;
  }
}

/* Ergänzungen für die eigenständige Bearbeitungsseite. */
.maintenance-page {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.maintenance-page main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.maintenance-hero {
  flex: 1;
  display: flex;
  align-items: center;
}

.maintenance-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 24px;
  border: 1px solid #c6d8bb;
  border-radius: 4px;
  background: #e7f2df;
  color: #365029;
  font: 700 .75rem/1.5 monospace;
  letter-spacing: .06em;
}

.maintenance-status span {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #52793f;
}

.maintenance-message {
  max-width: 560px;
  color: var(--muted);
}

.maintenance-contact {
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
}

.maintenance-footer-email {
  font-size: .875rem;
  text-underline-offset: 5px;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .maintenance-nav {
    justify-content: space-between;
  }

  .maintenance-status {
    font-size: .6875rem;
  }

  .maintenance-page .hero-panel h2 {
    font-size: 1.65rem;
  }

  .maintenance-page .panel-top {
    flex-wrap: wrap;
  }
}